Home Explore Help
Register Sign In
Magy
/
alt-youtube-player
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Initial commit

Joachim M. Giæver 4 years ago
parent
9f2c95d76c
commit
68961f29e7
2 changed files with 224 additions and 0 deletions
Split View Show Diff Stats
  1. 224 0
      index.html
  2. BIN
      thumb.png

+ 224 - 0
index.html
View File 

@@ -0,0 +1,224 @@
 
+<!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" />
 
+            <iframe src="https://www.youtube-nocookie.com/embed/dcsvMySGmS8?enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media; gyroscope" allowfullscreen></iframe>
 
+        </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.children('.thumb').slideUp();
 
+                    player.children('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.children('iframe').slideUp()
 
+                    player.children('.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.children('iframe');
 
+                    var thumb = player.children('.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).children('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.children('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>

BIN
thumb.png
View File