“任意のyoutube動画をローテーション表示する”のおぼえがき

あまりやることも無いけど、急に必要になったので調べてみた。
記述はこれだけ。
ただ、今回ぶつかったのが、動画のすぐ上にプルダウンメニューがある場合、何もしない状態だとIEではプルダウンが裏に回ってしまって選択できなくなってしまう。
なので、動画側では wmode=”transparent”を入れ、z-indexでは重ね順を1で一番下に入れました。
それでなんとなくクリア。

<div style="z-index:1;">
<script type="text/javascript"><!--
	 (function(){
	 var list = [
	"http://www.youtube.com/v/QlYfO1R83A8",
	"http://www.youtube.com/v/sOzuWBc4wOo",
	"http://www.youtube.com/v/Z4vIQ70XBzM"
	];
	var src=list[Math.floor(Math.random()*list.length)];
	document.write('<embed src="' + src + '" type="application/x-shockwave-flash" wmode="transparent" width="560" height="345"></embed>')
	})();
	//-->
</script>
</div>

↓結果はこちら。
リロードすると動画がかわります。

なんのこっちゃ?って?www


▼html5での再生

HTML5のvideoタグによる動画再生(Safari/Google Chrome向け)

動画を再生するには、videoタグをサポートしたブラウザが必要です。

Leave a Reply

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