完全公开自白:这不是一个问题,而是一个有一些答案的问题。
我最初不喜欢Youtube.com选择的三种缩略图选择,所以...
问题:如何为嵌入的youtube视频显示自定义缩略图或启动屏幕?
答案#1 :Youtube.com接受“获利”选项,并神奇地显示一个用于创建自定义缩略图的按钮。注意:这绝对不是我可以接受的选择,因为我的YouTube电影《永远的我的情歌》是我妻子的情歌(我写的歌词和我分享的作品)。让随机的广告和我的情歌一起出现在我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);
我在某处读到缩略图应指定为1280px x 840px,这就是我所做的。
在完全公开的兴趣中,以这种方式编写您自己的自定义缩略图会打败Youtube.com跟踪的自然 View 。仅当您使用获利路线时,浏览计数才会发生。
这是你的选择。
底线...我选择关注“观看次数”,因此很遗憾地选择了Youtube.com提供的3个缩略图选项之一;
参见--- http://lovesongforever.com
最佳答案
只需将代码复制并粘贴到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>
关于youtube - 嵌入式YouTube视频的自定义缩略图或启动屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20361736/