Custom thumbnail or splash screen for embedded youtube video

Question

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&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);

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;

Actually, there is a pretty easy way to achieve this. View this thread: http://stackoverflow.com/questions/13725683/how-to-add-a-splash-screen-placeholder-image-for-a-youtube-video — Zachary Coyne, Apr 29 '14 at 18:56

score 0 · Answer 1 · answered May 19 '15 at 11:41

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>

Custom thumbnail or splash screen for embedded youtube video

1 Answers1

Linked