Question

完全披露忏悔：这不是一个问题，而是一个有一些答案的问题。

我最初并不喜欢Youtube.com选择的三种缩略图选择，所以......

问题：如何为嵌入式YouTube视频显示自定义缩略图或启动画面？

回答＃1 ：在Youtube.com上接受获利选项，并创建一个用于创建自定义缩略图的按钮。注意：这对我来说绝对不是一个可以接受的选择，因为我的Youtube电影，名为“我永远的情歌”，是我妻子的一首情歌（我写的歌词和我分享的作品）。随机广告与我的情歌一起出现在51岁以上的新娘身上......没有机会!!!

回答＃2 ：通过使用css和frame传递这样的要求：

var videoSrc   = "http://www.youtube.com/embed/MxuIrIZbbu0";
var videoParms = "?autoplay=1&amp;fs=1&amp;hd=1&amp;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像素×840像素，这就是我所做的。

在完全披露的利益中，编写您自己的自定义缩略图这种方式将打败Youtube.com记录的自然视图。只有当您进入货币化路线时才会进行查看计数。

选择是你的。

BOTTOM LINE ...我选择关注View Count，所以我很遗憾地选择了Youtube.com提供的3个缩略图选项之一;

见--- http://lovesongforever.com

Answer 1

只需将代码复制并粘贴到HTML文件中即可享受快乐的编码。使用youtube api管理嵌入式嵌入式视频缩略图。

<!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视频的自定义缩略图或启动画面

1 个答案: