全面坦白：这不是一个问题，而是一个带有一些答案的问题。
我最初并不喜欢 Youtube.com 选择的三种缩略图，所以......
Question：如何为嵌入的 YouTube 视频显示自定义缩略图或启动画面？
答案#1：接受 Youtube.com 的获利选项和创建一个按钮custom缩略图神奇地出现。注意：这对我来说绝对不是一个可以接受的选择，因为我的 Youtube 电影，题为“My Love Song Forever”，是一首写给我妻子的情歌（我写了她的歌词，我分享了她的作品）。让随机广告与我写给我超过 51 岁的新娘的情歌一起出现……没有机会！
答案#2：使用 css 和框架绕过这样的要求：
var videoSrc = "http://www.youtube.com/embed/MxuIrIZbbu0";
var videoParms = "?autoplay=1&fs=1&hd=1&wmode=transparent";
// style of thumbNail's image must equal style of video for the 2 to overlap
var youtubeVideo = "" +
"<div>" +
"<iframe class='ls_video' src='" + videoSrc + videoParms + "'>" +
"</iframe>" +
"</div>";
var theThumbNail = "" +
"<div onclick=\"this.innerHTML = youtubeVideo;\">" +
"<img class='ls_video' src='images/MLSFthumbnail.jpg' style='cursor:pointer' alt='splash' \/> " +
"</div>";
document.write (theThumbNail);
我在某处读到缩略图的规格应为 1280 像素 x 840 像素，所以我就是这样做的。
为了充分披露，以这种方式编写您自己的自定义缩略图将击败 Youtube.com 跟踪的自然观看次数计数。仅当您走盈利路线时才会进行观看计数。
这是你的选择。
底线...我选择关注观看次数，因此我遗憾地选择了 Youtube.com 提供的 3 个缩略图选项之一；
只需将代码复制并粘贴到 HTML 文件中，即可享受快乐的编码过程。
使用 youtube api 管理 youtubed 嵌入视频缩略图。
<!DOCTYPE html>
<html>
<body>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
}
});
}
function onPlayerReady(event) {
$('#play_vid').click(function() {
event.target.playVideo();
});
}
$(document).ready(function() {
$('#player').hide();
$('#play_vid').click(function() {
$('#player').show();
$('#play_vid').hide();
});
});
</script>
<div id="player"></div>
<img id="play_vid" src="YOUR_IMAGE_PATH" />
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
