Magy
/
alt-youtube-player


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
							<!DOCTYPE html>
<html>
    <head>
        <title>Alt. youtube player</title>
        <style>

        /* 

           Adapt to your needs,

           but it shouldn't be necessary to add much of css

           as the js-script will handle sizing.

        */

        * {padding: 0;margin: 0;} /* Not necessary when using frameworks */


        .player {

            width: 70vw;

            margin: 0 auto;

        }


        /*

           Note that the > restricts the img to be on the root level of .player

        */

        .player > img.thumb {

            width: 100%;

        }


        .player > iframe {

            width: 100%;

            height: 100%;

        }

        .player.play {

            cursor: pointer;

        }

        .player.stop {

            cursor: not-allowed;

        }

        .player.loading {

            cursor: wait;

        }

        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
        <!--

            A player MUST:

            - Have a class «player»

            - Have a child element of img

                - with the class «thumb»

            - Have a child of the iframe

                - that has the query-param «enablejsapi=1»

        -->
        <div class="player">
            <img class="thumb" src="./thumb.png" alt="Thumbnail" />
            <div class="something wf realated classed and shit">
            <iframe src="https://www.youtube-nocookie.com/embed/dcsvMySGmS8?enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media; gyroscope" allowfullscreen></iframe>
            </div>
        </div>

        <!-- additional players -->
        <div class="player">
            <img class="thumb" src="./thumb.png" alt="Thumbnail" />
            <iframe src="https://www.youtube-nocookie.com/embed/pouODQkJQG0?enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media; gyroscope" allowfullscreen></iframe>
        </div>
        <div class="player">
            <img class="thumb" src="./thumb.png" alt="Thumbnail" />
            <iframe src="https://www.youtube-nocookie.com/embed/Y-JQ-RCyPpQ?enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media; gyroscope" allowfullscreen></iframe>
        </div>
        <div class="player">
            <img class="thumb" src="./thumb.png" alt="Thumbnail" />
            <iframe src="https://www.youtube-nocookie.com/embed/4-079YIasck?enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media; gyroscope" allowfullscreen></iframe>
        </div>
        
        <!-- You need this before the </body>-tag (closing) -->
        <script>

            // Hack to load Youtube iframe_api

            jQuery.getScript("http://www.youtube.com/iframe_api")

            
            var ytd = $.Deferred();

            window.onYouTubeIframeAPIReady = function () {

                ytd.resolve(window.YT);

            };


            $(document).ready(function () {

                // Store all instances of «Youtube Players»

                var ytp = [];


                // When a player opens

                var playerOpen = function (i, player) {

                    if (!ytp[i])

                        return;


                    // Remove thumb and show iframe

                    player.find('.thumb').slideUp();

                    player.find('iframe').slideDown({

                        complete: function () {

                            // When fully opened, plat video and change cursor

                            ytp[i].playVideo()

                            player.removeClass('play loading').addClass('stop');

                        }

                    });


                    // Close all the players that might be open.

                    $('.player').each(function (idx) {

                        if (i == idx) return;

                        playerClose(i, $(this));

                    })

                }


                // When a player is closing

                var playerClose = function (i, player) {

                    if (!ytp[i])

                        return;

                    
                    // Stop the video

                    ytp[i].stopVideo();


                    // Hide iframe and show thumg

                    player.find('iframe').slideUp()

                    player.find('.thumb').slideDown(function() {

                        player.removeClass('stop loading').addClass('play');

                    });

                }


                // Make sure Iframe has the same size as the thumb-img

                var adoptThumbSizeToIframe = function (player) {

                    var ytvid = player.find('iframe');

                    var thumb = player.find('.thumb');


                    var hidden = thumb.is(':hidden');


                    // Hack to read size

                    if (hidden)

                        thumb.show();


                    // Adopt the size of the thumbnail to the iframe

                    ytvid.css({

                        height: thumb.height(),

                        width: thumb.width(),

                    });


                    if (hidden)

                        thumb.hide();


                }


                // On scroll, check that we are withing bounding. Close if not.

                window.addEventListener('scroll', function (e) {

                    var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

                    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

                    var d = $(document).scrollTop();


                    $('.player').each(function (i) {

                        if ($(this).find('iframe:visible').length == 0)

                            return; // player not open (already showing thumb)


                        var x = $(this).offset()['top']; 

                        var xoff = $(this).height() / 15;


                        if ((x + $(this).height() - xoff) < d || (x + xoff) > (d + h))

                            playerClose(i, $(this));


                        /*

                        No horizontal test... but...

                        var y = $(this).offset()['left'];

                        var yoff = ($(this).width() / 15);

                        */


                    })

                })


                window.addEventListener('resize', function () {

                    $('.player').each(function() {

                        console.log("Resize");

                        adoptThumbSizeToIframe($(this));

                    })

                })


                // Youtube API is reacy

                ytd.done(function (YT) {

                    /*

                    Initialize player on all of them.

                    Could be optimized and wait with init until the player should start,

                    and destroy it when it's closed.

                    */

                    $(".player").each(function (i) {

                        var player = $(this).addClass('loading');

                        var ytvid = player.find('iframe').hide();

                        adoptThumbSizeToIframe(player);


                        // Generate and add id to the iframe

                        ytvid.attr('id', 'player-' + (i+1));

                        ytp.push(new YT.Player(ytvid.attr('id'), {

                            events: {

                                'onReady': function (e) {

                                    player.removeClass('loading').addClass('play');

                                    player.bind('click', function () {

                                        playerOpen(i, player);

                                    })

                                },

                                'onStateChange': function (e) {

                                    // Add event specific data here

                                    switch (e.data) {

                                    case YT.PlayerState.ENDED:

                                        playerClose(i, player)

                                        break;

                                    case YT.PlayerState.PLAYING:

                                        // console.log("PLAYING");

                                        break;

                                    case YT.PlayerState.PAUSED:

                                        player.removeClass('stop loading').addClass('play');

                                        break;

                                    case YT.PlayerState.BUFFERING:

                                        player.removeClass('stop play').addClass('loading');

                                        break;

                                    case YT.PlayerState.CUED:

                                        //console.log("CUED");

                                        break;

                                    }

                                }, 

                            }

                        }));

                    })

                })

            });

        </script>
    </body>
</html>