如何將YouTube視頻添加爲<video>而不是嵌入式<iframe>？

-2

我必須在網站上插入全寬視頻。如何將YouTube視頻添加爲<video>而不是嵌入式<iframe>？

由於重量和設計問題，我想知道是否可以將YouTube視頻指定爲<video>標記的src屬性，而不是嵌入。

我希望有一個沒有播放器設計的YouTube視頻，並儘可能兼容不同的設備（例如瀏覽器，智能手機，平板電腦）。

你有什麼想法或解決方案嗎？

來源

2016-06-13 xdxp

你應該選擇一個答案或指定問題進一步。這是不禮貌的。 – actimel

我不知道是否有可能不使用iframe。但是你可以改變很多Youtube播放器的設計。據我所知應該與移動設備兼容。

只需打開Youtube視頻。點擊分享。點擊嵌入。點擊顯示更多。取消選中「顯示播放器控件」，「顯示視頻標題和播放器操作」和「視頻播放完成時顯示建議的視頻」。複製Iframe標記。

您可以手動更改iframe的寬度。

例如：

<iframe width="560" height="315" src="https://www.youtube.com/embed/xmhnNUotIaE?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

來源

2016-06-13 12:53:16 Tom

據我所知，你不能嵌入視頻的網頁，使用原來的YouTube播放器（使用iframe的）任何其他方式。

你可以定位iframe來填充視口，並讓內容重疊，就像這個帖子所示：http://www.labnol.org/internet/youtube-video-background/27933/？演示是在這裏：http://img.labnol.org/files/video-background.html

<div style="position: fixed; z-index: -99; width: 100%; height: 100%"> 
    <iframe frameborder="0" height="100%" width="100%" 
    src="https://youtube.com/embed/ID?autoplay=1&controls=0&showinfo=0&autohide=1"> 
    </iframe> 
</div> 

// Replace ID with the actual ID of your YouTube video

您可以通過JavaScript使用YouTube API https://developers.google.com/youtube/iframe_api_reference也控制它。

來源

2016-06-13 12:57:38 actimel

鏈接只有答案是不允許的。複製這裏回答問題的相關代碼。 – Rob

@suyesh你爲什麼評論這個答案與一個不相關的鏈接？ – Rob

您可以通過添加下面的CSS來使iframe響應，這應該比您嘗試的方法更容易。

如果你想定製的外觀和感覺的球員，你可以寫使用自己的腳本youtube Data API或a JQuery plugin利用該API

<style> 
 
    .outer-container{ 
 
     width:100% 
 
    } 
 
    .video-container { 
 
     position: relative; 
 
     padding-bottom: 56.25%; 
 
     padding-top: 35px; 
 
     height: 0; 
 
     overflow: hidden; 
 
    } 
 
    .video-container iframe { 
 
     position: absolute; 
 
     top:0; 
 
     left: 0; 
 
     width: 100%; 
 
     height: 100%; 
 
    } 
 
    </style>

<div class="outer-container"> 
 
<div class="video-container"> 
 
     <iframe width="560" height="315" src="https://www.youtube.com/embed/0afZj1G0BIE" frameborder="0" allowfullscreen></iframe> 
 
</div> 
 
<br> 
 
    <div class="video-container"> 
 
      <iframe width="560" height="315" src="https://www.youtube.com/embed/0afZj1G0BIE" frameborder="0" allowfullscreen></iframe> 
 
    </div> 
 
</div>

來源

2016-06-13 13:03:32 SML

如何將YouTube視頻添加爲<video>而不是嵌入式<iframe>？

回答

相關問題