スポンサーサイト

--/--/-- スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

スポンサードリンク

iPhone/iPadでブログの埋込みYouTubeが表示されない【ブログトラブル解決】

2011/04/27 ブログデザイン

解決策は<iframe>を使わないこと

昨年7月からYouTubeは埋め込み方式を<iframe>に対応させ、今年の1月から<object>がデフォルトではなくなりました。iPhone/iPadのSafariでは<iframe>の扱いに不具合がありますので、埋め込み動画を表示させてあげるには、YouTubeかApple側が改善するまでは 1)旧方式の<object>を使う、または 2)グーグルの公式ブログ「iframe 埋め込み式 YouTube Player 向け JavaScript Player API のご紹介」にある対応策を使う、のおもに2通りです。以下はその方法です。

1)YouTubeの埋め込み方式を旧式<object>にする方法

埋め込みオプションで「古い埋め込みコードを使用する」にチェックを入れると、iframeタグからobjectタグに変わります。今まで通り問題なく表示できるはずです。

iPhone/iPadで表示可能なYouTubeの埋め込み方式

2)JavaScript Player APIを使う方法

下の右側のコードを使います。
赤と緑と黄色にハイライトした部分をそれぞれ置き換えます。
<div id="player"></div>が動画を表示する部分になります。

元のiframe JavaScript Player API版
<iframe title="YouTube video player" 
width="640" height="390"
src="http://www.youtube.com/embed/JW5meKfy3fY?rel=0"
frameborder="0" allowfullscreen></iframe>
<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>


FC2ブログで上のコードが正しく表示されない場合

「iPhone版で表示」では、YouTubeの埋め込み動画は表示できません。
こういう場合は「PC版」で表示してみてください。



スポンサードリンク

-0コメント

非公開コメント(
トラックバック :

スポンサーリンク

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。