SQLの窓

2012年08月05日


スマホでYouTubeの埋め込みの表示サイズをJavaScriptでコントロールする

最近まで、YouTube で埋め込みコードを取得すると、OBJECT タグで埋め込まれていたようなのですが、今は IFRAME で取得できるようなので、この処理が可能です。

通常のブログですと、幅640で埋め込んでも特に問題無いですが、スマホで表示するとはみ出てしまいます。その対応処理です。

.text iframe とありますが、Seesaa のブログでは本文の class が text なので、その中の iframe に対して処理を行っています
<script type="text/javascript">
(function(){
	var str = "";
	var userAgent = window.navigator.userAgent.toLowerCase();
	if (userAgent.indexOf("iphone") > -1 || userAgent.indexOf("android") > -1 ) {
		str+="<style type=\"text/css\"> \n";
		str+=".text iframe { \n";
		str+="	width:290px!important; \n";
		str+="	height:auto!important; \n";
		str+="} \n";
		str+="</style> ";
		document.write(str);
	}
})();
</script>
<iframe width="640" height="480" src="http://www.youtube.com/embed/uxBFiU2N65c" frameborder="0" allowfullscreen></iframe>

iPhone



Android





posted by lightbox at 2012-08-05 01:18 | JavaScript コンテンツ | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり