嵌入式 YouTube 视频的自定义缩略图或启动画面 [英] Custom thumbnail or splash screen for embedded youtube video
问题描述
Full Disclosure Confession:这不是一个问题，而是一个有一些答案的问题.
我一开始并不喜欢 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";//拇指指甲的图像样式必须与视频样式相同才能使 2 重叠var youtubeVideo = "" +"+"<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 跟踪的自然视图计数.仅当您采用货币化路线时，才会进行观看计数.
选择权在你.
BOTTOM LINE ...我选择关注观看次数，所以我很遗憾地选择了 Youtube.com 提供的 3 个缩略图选项之一；
见 --- http://lovesongforever.com
解决方案 只需将代码复制并粘贴到 HTML 文件中，即可享受愉快的编码过程.使用 youtube api 管理 youtubed 嵌入的视频缩略图.
<身体><script src="http://code.jquery.com/jquery-1.8.3.min.js"></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 播放器；函数 onYouTubeIframeAPIReady() {player = new YT.Player('玩家', {高度:'390'，宽度:'640'，videoId: 'M7lc1UVf-VE',事件:{'onReady': onPlayerReady,}});}函数 onPlayerReady(event) {$('#play_vid').click(function() {event.target.playVideo();});}$(document).ready(function() {$('#player').hide();$('#play_vid').click(function() {$('#player').show();$('#play_vid').hide();});});<div id="玩家"></div><img id="play_vid" src="YOUR_IMAGE_PATH"/></html>
Full Disclosure Confession: This is not a question, but a question with some answers.
I did not initially like the three choices of thumbnails that Youtube.com selected, so ...
Question: How do I display a custom thumbnail or splash screen for my embedded youtube video?
Answer #1: Accept Monetization option with Youtube.com and a button to create a custom thumbnail magically appears. NOTE: this was definitely NOT an acceptable option for me since my Youtube movie, entitled "My Love Song Forever", is a Love Song to my wife (whose lyrics I wrote and whose production I shared in). Have random ads appear together with my Love Song to my bride of over 51 years ... not a chance!!!
Answer #2: By pass such a requirement using css and frames:
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);
I read somewhere that the thumbnail should spec at 1280px by 840px, so that is what I did.
IN THE INTEREST OF FULL DISCLOSURE, writing your own custom thumbnail THIS WAY will defeat the natural view counting that Youtube.com keeps track of. View counting will happen ONLY WHEN you go the monetization route.
THE CHOICE IS YOURS.
BOTTOM LINE ... I chose to be concerned about the View Count, so I regretfully chose one of the 3 thumbnail choices that Youtube.com offered;
See --- http://lovesongforever.com
解决方案 Just copy and paste the code in an HTML file and enjoy the happy coding.
Using youtube api to manage the youtubed embedded video thumbnail.
<!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 视频的自定义缩略图或启动画面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
