发表新帖
发表新帖

YouTube embedded video: set different thumbnail

前端 未结
关注
11 1156
忘了有多久
忘了有多久 2020-12-23 20:02

I want to embed a video from YouTube that is not mine (so I can not change it at YouTube). The video has a thumbnail that is not representative for the video (I refer to the

相关标签:
11条回答
  • 南方客
    2020-12-23 20:35

    There's a nice workaround for this in the sitepoint forums:

    <div onclick="this.nextElementSibling.style.display='block'; this.style.display='none'">
   <img src="my_thumbnail.png" style="cursor:pointer" />
</div>
<div style="display:none">
    <!-- Embed code here -->
</div>

    Note: To prevent having to click twice to make the video play, use autoplay=1 in the video embed code. It will start playing when the second div is displayed.

    0 讨论(0)
  • 半阙折子戏
    2020-12-23 20:36

    I was having trouble with the autoplay from waldir's solution... using autoplay, the video was playing when the page loaded, not when the div got displayed.

    This solution worked for me except I replaced

    <a class="introVid" href="#video">Watch the video</a></p>

    with

    <a class="introVid" href="#video"><img src="images/NEWTHUMB.jpg" style="cursor:pointer" /></a>

    so that it would use my thumbnail in place of the text link.

    0 讨论(0)
  • 爱一瞬间的悲伤
    2020-12-23 20:39

    Your best bet would be to use the tutorial on http://orangecountycustomwebsitedesign.com/change-the-youtube-embed-image-to-custom-image/#comment-7289. This will ensure there is no double clicking and that YouTube's video doesn't autoplay behind your image prior to clicking it.

    Do not plug in the YouTube embed code as YT(YouTube) gives it (you can try, but it will be ganky)...instead just replace the source from the embed code of your vid UP TO "&autoplay=1" (leave this on the end as it is).

    eg.)

    Original code YT gives:

    `<object width="420" height="315"><param name="movie" value="//www.youtube.com/v/5mEymdGuEJk?hl=en_US&amp;version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/5mEymdGuEJkhl=en_US&amp;version=3" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>`

    Code used in tutorial with same YT src:

    `<object width="420" height="315" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess"value="always" /><param name="src" value="http://www.youtube.com/v/5mEymdGuEJk?version=3&amp;hl=en_US&amp;autoplay=1" /><param name="allowfullscreen" value="true" /><embed width="420" height="315" type="application/x-shockwave-flash" src="http://www.youtube.com/v/5mEymdGuEJk?version=3&amp;hl=en_US&amp;autoplay=1" allowFullScreen="true" allowscriptaccess="always" allowfullscreen="true" /></object>`

    Other than that, just replace the img source and path with your own, and voilà!

    0 讨论(0)
  • 死守一世寂寞
    2020-12-23 20:46

    The answers did not work for me. Maybe they were outdated.

    Anyway, found this website, which does all the job for you, and even prevent you from needing to read the unclear-as-usual google documentation: http://www.classynemesis.com/projects/ytembed/

    0 讨论(0)
  • 我寻月下人不归
    2020-12-23 20:49

    Just copy and paste the code in HTML file. and enjoy the happy coding. Using Youtube api to manage the thumbnail of youtube embedded video.

    <!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>
    0 讨论(0)
 看不清?
提交回复
热议问题