Magy
/
alt-youtube-player


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
							<!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 {
            position: relative;
            z-index: 2;
            width: 70vw;
            margin: 0 auto;
        }

        /*
           Note that the > restricts the img to be on the root level of .player
        */
        .player > img.thumb {
            position: absolute;
            z-index: 1;
            width: 100%;
        }

        .player > iframe {
            position: absolute;
            z-index: -1;
            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&rel=0" 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("https://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 = [];

                // Change effect on IN and OUT here.
                // Will affect on both «playerOpen» and «playerClose»
                $.fn.outEffect = $.fn.fadeOut;
                $.fn.inEffect = $.fn.fadeIn;

                // When a player opens
                var playerOpen = function (i, player) {
                    if (!ytp[i])
                        return;
                    
                    // Remove thumb and show iframe
                    player.find('.thumb').outEffect();
                    player.find('iframe').inEffect({
                        complete: function () {
                            // When fully opened, plat video and change cursor
                            if (ytp[i].getPlayerState() != YT.PlayerState.PLAYING)
                                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(idx, $(this));
                    })
                }

                // When a player is closing
                var playerClose = function (i, player) {
                    if (!ytp[i])
                        return;

                    // Hide iframe and show thumg
                    player.find('iframe').outEffect()
                    player.find('.thumb').inEffect(function() {
                        // Stop the video; if playing
                        if (ytp[i].getPlayerState() == YT.PlayerState.PLAYING)
                            ytp[i].pauseVideo();

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

                    player.css({
                        height: thumb.height(),
                        width: thumb.width(),
                    });

                    // 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>