ＷＥＢページにYoutubeを埋め込む問題点

ＷＥＢページへの埋め込み動画を表示させるには、YouTubeかApple側がこの部分を変更してくれるのを待つしかないというのが現状。

解決策としては旧方式の<object>を使う。

あるいはグーグルの公式ブログ「iframe 埋め込み式 YouTube Player 向け JavaScript Player API のご紹介」にある対応策を使う。

JavaScript Player APIを使う方法

元の iframe

<iframe title="YouTube video player"
width="640" height="390"
src="http://www.youtube.com/embed/JW5meKfy3fY?rel=0"
 frameborder="0" allowfullscreen></iframe>

JavaScript Player API版

<div id="player"></div>
<script><!--
    //Load player api asynchronously.
    var tag = document.createElement('script');
    tag.src = "http://www.youtube.com/player_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var done = false;
    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'JW5meKfy3fY',
        });
    }
//-->
</script>

YouTube 埋め込みプレーヤーとプレーヤーのパラメータ