Youtubeで、ページスクロールしてブラウザに現れたときに再生を始めるJavascript

ちょっと頼まれたので作ったコードです。

jQueryにはLazyLoadなる画像の後読みのプラグインがありますが
あれは画像の表示されたら画像を読みにいくっていうことで
無駄な読み込みを減らす事ができたりするってことでしたが
（結局のところ読みこんじゃうらしいですね）
Youtubeの動画をページに埋め込んで、スクロールして
表示されたときに、再生してくれたらいいなってことで
jQueryのLazyLoadをコードを眺めていたら
どうもスクロール位置が云々している様子。

だったら、スクロールイベントで、動画を貼付けた位置になったら
再生させればいいんじゃね？ってことで
じゃあ、再生コントロールはどうしたかっていうと、
YouTube JavaScript Player APIってのがあるので、これを利用。

設定的には動画の表示が画面の2/3を超えたら再生を始めるようにしました。
また、リロードで動画の表示位置からいきなり始まったときは
スクロールをちょっとすると反応するようです。

ってことで、プラグインではないけど作ったコードをさらしておきます。
何かの参考にしてみてくださいw

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

<!-- 設定 -->
<script type="text/javascript">
	var youtube_video_id="nCCbRsXB6ng";
	var youtube_video_width= "320"
	var youtube_video_height= "330"
	var youtube_video_volume= 10;
</script>

<script type="text/javascript">

function onYouTubePlayerReady(playerId) {
	ytplayer1 = document.getElementById("myytplayer");
}

$(document).ready(function(){

	var use_youtube_video_width;
	var use_youtube_video_height;
	var use_youtube_video_volume;

	if( typeof youtube_video_width != "undefined" )
		use_youtube_video_width =youtube_video_width
	else
		use_youtube_video_width = "400"

	if( typeof youtube_video_height != "undefined" )
		use_youtube_video_height =youtube_video_height
	else
		use_youtube_video_height = "330"

	if( typeof youtube_video_volume != "undefined" )
		use_youtube_video_volume =youtube_video_volume
	else
		use_youtube_video_volume = "0"

	var params = { allowScriptAccess: "always" };
	var atts = { id: "myytplayer" };
	swfobject.embedSWF("http://www.youtube.com/v/"+youtube_video_id+"?enablejsapi=1&playerapiid=ytplayer","ytapiplayer",use_youtube_video_width, use_youtube_video_height, "8", null, null, params, atts);
	var youtube_hello_flg=false;

	$(window).scroll(function () {
		if(youtube_hello_flg==false){
			var scroll_y = document.documentElement.scrollTop || document.body.scrollTop;
			var off = $('#youtube_moviestart_trigger_tag').offset();
			var win_height = $(window).height()
			if(off.top<=(scroll_y + win_height/3*2)  && youtube_hello_flg==false){
				if( typeof ytplayer1 != "undefined" ){
					youtube_hello_flg=true;
					ytplayer1.playVideo();     //再生開始（自動再生）
					ytplayer1.setVolume(use_youtube_video_volume);  //音量を20に設定
				}
			}
		}
	});

});

</script>


3<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
2<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
1<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
0


<!-- youtube動画 -->
<div id='youtube_moviestart_trigger_tag' align='left' style='margin: 5px 20px 0;float:left;'>
<div id='ytapiplayer'> You need Flash player 8+ and JavaScript enabled to view this video.</div>
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>end