youtube - 嵌入式YouTube视频的自定义缩略图或启动屏幕

标签 youtube

完全公开自白:这不是一个问题,而是一个有一些答案的问题。

我最初不喜欢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/

相关文章:

cordova - Cordova 浏览器不支持嵌入式YouTube全屏显示

javascript - 检测视频何时发生更改 - YouTube iFrame API

youtube - 如何获取YouTube用户/ channel 缩略图?

wordpress - 如何在WordPress中仅一次获得youtube自动播放?

android - 将我的应用中任何 channel 的Youtube视频与YoutubeApiPlayer一起使用是合法的

javascript - 将 javascript var 传递到 iframe

youtube - 如何获取 YouTube channel 表情符号列表?

php - WP Oembed 未传递 “autoplay=1” 变量

javascript - 动态更改 Youtube Iframe playerVars

php - ForEach 随机数组