Facebook
From Melodic Owl, 5 Days ago, written in Plain Text.
Embed
Download Paste or View Raw
Hits: 46
  1. <div class="youtube-player" id="1" data-id="LcIytqkbdlo" data-start="10"></div>
  2. <div class="youtube-player" id="2" data-id="LcIytqkbdlo" data-start="10"></div>
  3. <div class="youtube-player" id="3" data-id="LcIytqkbdlo" data-start="10"></div>
  4. <div class="youtube-player" data-id="LcIytqkbdlo" data-start="10"></div>
  5. <div class="youtube-player" data-id="LcIytqkbdlo" data-start="10"></div>
  6. <div class="youtube-player" data-id="LcIytqkbdlo" data-start="10"></div>
  7.  
  8.  
  9. <script>
  10.  
  11.  
  12.  
  13.  
  14.     /* Light YouTube Embeds by @labnol */
  15.     /* Web: http://labnol.org/?p=27941 */
  16.  
  17.     document.addEventListener("DOMContentLoaded",
  18.         function() {
  19.             var div, n,
  20.                 v = document.getElementsByClassName("youtube-player");
  21.             for (n = 0; n < v.length; n++) {
  22.                 div = document.createElement("div");
  23.                 div.setAttribute("data-id", v[n].dataset.id);
  24.                 div.setAttribute("data-start", v[n].dataset.start);
  25.                 div.innerHTML = labnolThumb(v[n].dataset.id);
  26.                 div.onclick = labnolIframe;
  27.                 v[n].appendChild(div);
  28.             }
  29.         });
  30.  
  31.     function labnolThumb(id) {
  32.         var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
  33.             play = '<div class="play"></div>';
  34.         return thumb.replace("ID", id) + play;
  35.     }
  36.  
  37.     function labnolIframe() {
  38.         var iframe = document.createElement("iframe");
  39.         var embed = "https://www.youtube.com/embed/ID?start=START&autoplay=1";
  40.        
  41. iframe.setAttribute("src",
  42.           "https://www.youtube.com/embed/" + this.dataset.id
  43.         + "?start=" + this.dataset.start + "&autoplay=1&autohide=1&border=0&wmode=opaque&enablejsapi=1");
  44.        
  45.         iframe.setAttribute("frameborder", "0");
  46.         iframe.setAttribute("allowfullscreen", "1");
  47.         this.parentNode.replaceChild(iframe, this);
  48.     }
  49.  
  50.  
  51. function stop(){
  52.     var iframe = document.getElementById('youriframe');
  53.     iframe.src = iframe.src;
  54. }
  55.  
  56. </script>
  57.  
  58. <style>
  59.     .youtube-player {
  60.         position: relative;
  61.         padding-bottom: 56.23%;
  62.         /* Use 75% for 4:3 videos */
  63.         height: 0;
  64.         overflow: hidden;
  65.         max-width: 100%;
  66.         background: #000;
  67.         margin: 5px;
  68.     }
  69.    
  70.     .youtube-player iframe {
  71.         position: absolute;
  72.         top: 0;
  73.         left: 0;
  74.         width: 100%;
  75.         height: 100%;
  76.         z-index: 100;
  77.         background: transparent;
  78.     }
  79.    
  80.     .youtube-player img {
  81.         bottom: 0;
  82.         display: block;
  83.         left: 0;
  84.         margin: auto;
  85.         max-width: 100%;
  86.         width: 100%;
  87.         position: absolute;
  88.         right: 0;
  89.         top: 0;
  90.         border: none;
  91.         height: auto;
  92.         cursor: pointer;
  93.         -webkit-transition: .4s all;
  94.         -moz-transition: .4s all;
  95.         transition: .4s all;
  96.     }
  97.    
  98.     .youtube-player img:hover {
  99.         -webkit-filter: brightness(75%);
  100.     }
  101.    
  102.     .youtube-player .play {
  103.         height: 72px;
  104.         width: 72px;
  105.         left: 50%;
  106.         top: 50%;
  107.         margin-left: -36px;
  108.         margin-top: -36px;
  109.         position: absolute;
  110.         background: url("//i.imgur.com/TxzC70f.png") no-repeat;
  111.         cursor: pointer;
  112.     }
  113.  
  114. </style>