youtube埋め込みをスマートフォン用に自動調整(jQuery)

Pocket

スマートフォン向けスキン作りの続き小ネタ。
せっかくスマートフォン向けに画面幅を決めたのに
過去記事のyoutubeなどの埋め込みが幅に収まらなくて表示崩れになる対処方法を考えてみます。

Youtubeの埋め込みタグ今昔

YouTubeの埋め込みタグは、気づいたらこのブログ内でも
今と昔で形式が違いました。
いま

<iframe width="560" height="349" src="http://www.youtube.com/embed/q26SXvULaFc" frameborder="0" allowfullscreen></iframe>

むかし

<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/YNYxvn4R45M&hl=ja_JP&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/YNYxvn4R45M&hl=ja_JP&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>

ニコニコ動画の埋め込みタグ

ちなみにニコニコ動画も同じでした。
ニコ動の今

<script type="text/javascript" src="http://ext.nicovideo.jp/thumb_watch/nm11363544"></script><noscript><a href="http://www.nicovideo.jp/watch/nm11363544">【ニコニコ動画】VOCALOID2 Lilyのデモをもらったのでアップしてみた</a></noscript>

ニコ動の昔

<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/YNYxvn4R45M&hl=ja_JP&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/YNYxvn4R45M&hl=ja_JP&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>

サイズ変更jQueryスクリプト

とりあえず以下の前半のプログラムで、iframe版の今の形式は
うまくサイズ変更することができます。

<!-- adjust youtube iframe for phone -->
<script type="text/javascript">
$(document).ready(function(){
$('iframe').load(function(){
if ($(this).attr('src').indexOf("youtube") != -1) {
owidth = $(this).attr('width');
oheight= $(this).attr('height');
$(this).width(300);
$(this).height(oheight*300/owidth);
}
});
$('iframe').triggerHandler('load');
});
</script>
<!-- adjust old youtube iframe for phone -->
<script type="text/javascript">
/*
$(document).ready(function(){
$('embed').each(function(){
if ($(this).attr('src').indexOf("youtube") != -1) {
owidth = $(this).attr('width');
oheight= $(this).attr('height');
$(this).width(300);
$(this).height(oheight*300/owidth);
}
});
$('embed').triggerHandler('load');
});
*/
</script>

しかし昔のバージョンに対応するための後半のプログラムは、
Firefox上で試した所動きましたが、Android実機のDesireでは動かず。

Add a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です