嵌入Youtube視頻：縮略圖上的自定義Javascript操作

我正在使用自定義JavaScript縮略圖嵌入YouTube視頻。如果操作正確，頁面應該加載一個自定義縮略圖，並且點擊應該加載一個iframe youtube視頻並自動開始播放。嵌入Youtube視頻：縮略圖上的自定義Javascript操作

我與本教程做參考： A More Efficient Method for Embedding YouTube Videos

我一開始web開發人員，我得到一些越野車的結果。我設法加載了一個自定義縮略圖，並在用戶點擊縮略圖時自動播放相應的視頻，但該頁面會在視頻縮略圖的左上角加載一個小的可見文件縮略圖。

任何人都可以找到任何錯誤的HTML或Java？我認爲我的CSS部分是正確的，但我也將其添加爲參考。

HTML

<div class="youtube-container"> 
     <div class="youtube-player" id="yo" data-id="9jkx03pnMtg"> 
      <div> 
       <img class="youtube-thumb" src="img/yo_thumbnail.png"> 
      <div class="play-button"></div> 
      </div> 
     </div> 
    </div>

腳本

<script> 
(function() { 
    var v = document.getElementsByClassName("youtube-player"); 
    for (var n = 0; n < v.length; n++) { 
     var p = document.createElement("div"); 
     p.innerHTML = labnolThumb(v[n].dataset.id); 
     p.onclick = labnolIframe; 
     v[n].appendChild(p); 
    } 
})(); 

function labnolThumb(id) { 
    return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>'; 
} 

function labnolIframe() { 
    var iframe = document.createElement("iframe"); 
    iframe.setAttribute("src", "http://www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1"); 
    iframe.setAttribute("frameborder", "0"); 
    iframe.setAttribute("id", "youtube-iframe"); 
    this.parentNode.replaceChild(iframe, this); 
} 
</script>

CSS

.youtube-container { display: block; margin: 20px auto; width: 100%; max-width: 600px; } 
.youtube-player { display: block; width: 100%; /* assuming that the video has a 16:9 ratio */ padding-bottom: 56.25%; overflow: hidden; position: relative; width: 100%; height: 100%; cursor: hand; cursor: pointer; display: block; } 
img.youtube-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; height: auto } 
div.play-button { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url("http://i.imgur.com/TxzC70f.png") no-repeat; } 
#youtube-iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

來源

2016-01-20 Jackson Spilsbury

你並不需要在你的HTML標籤img。這就是你在視頻縮略圖的角落看到的。

<img class="youtube-thumb" src="img/yo_thumbnail.png">

它會自動被JavaScript的說：

function labnolThumb(id) { 
    return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>'; 
}

來源

2016-01-20 10:03:48 jim0thy

嵌入Youtube視頻：縮略圖上的自定義Javascript操作

回答

相關問題