如何播放沒有iframe的YouTube視頻？

Question

尋找一種在HTML，Javascript，PHP或CSS支持的視頻播放器中顯示YouTube視頻的方法。可能是CSS。我不反對下載視頻並自己託管它，但我希望讓谷歌託管它。

任何想法？

Answer 1

當您嵌入視頻時，您可以選擇使用「舊嵌入代碼」，該代碼使用對象標籤而不是iframe。這裏有一個例子：

<object width="560" height="315"> 
 
    <param name="movie" value="http://www.youtube.com/v/aBcDeFg?hl=en_US&amp;version=3"></param> 
 
    <param name="allowFullScreen" value="true"></param> 
 
    <param name="allowscriptaccess" value="always"></param> 
 
    <embed src="http://www.youtube.com/v/aBcDeFg?hl=en_US&amp;version=3" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed> 
 
</object>

Answer 2

一個更好的方法：使用雅虎媒體播放器！

只需在您的頁面正文中包含此代碼：
<script type="text/javascript" src="http://webplayer.yahooapis.com/player.js"> </script>
只需在頁面正文上添加一個YouTube視頻鏈接即可。然後，當它被點擊時，它會發揮！另外，如果您添加多個視頻/音頻文件，則它將包含播放列表中的所有內容。點擊此處瞭解詳情：http://webplayer.yahoo.com/或更多的代碼，並在這裏演示：http://webplayer.yahoo.com/get/
Shadowpat

Answer 3

截至不遲於2015年1月27日：使用API​​的目標代碼已被棄用：

3月9日， 2015

該文檔已更新，以反映YouTube嵌入，YouTube Flash Player API和YouTube JavaScript Player API已於2015年1月27日全部棄用的事實。此文檔的幾個部分中出現棄用警告以幫助讀者指向IFrame Player API替代。

的API代碼可以看起來像：

<div id="ytplayer"></div> 

<script> 
    // Load the IFrame Player API code asynchronously. 
    var tag = document.createElement('script'); 
    tag.src = "https://www.youtube.com/player_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

    // Replace the 'ytplayer' element with an <iframe> and 
    // YouTube player after the API code downloads. 
    var player; 
    function onYouTubePlayerAPIReady() { 
    player = new YT.Player('ytplayer', { 
     height: '360', 
     width: '640', 
     videoId: 'M7lc1UVf-VE' 
    }); 
    } 
</script> 

雙方報價和代碼來源：https://developers.google.com/youtube/player_parameters

在尋找：https://developers.google.com/youtube/youtube_player_demo

頁面的源顯示， API將播放器作爲html發出，並帶有用於實際視頻顯示的視頻標籤：

<div id="player" style="width: 100%; height: 100%;"> 
<div class="html5-video-player unstarted-mode ytp-hide-controls" tabindex="-1" id="player_uid_7211231_1" data-version="/yts/jsbin/player-vflC8Yy7I/en_US/base.js" aria-label="YouTube Video Player"> 
     <div class="html5-video-container" data-layer="0"> 
      <video tabindex="-1" class="video-stream html5-main-video" controlslist="nodownload" style="width: 720px; height: 405px; left: 0px; top: -405px;"></video> 
     </div> 
     <div class="ytp-gradient-top" data-layer="1"></div> 
     ... 
</div> 
</div>