Hatena::ブログ(Diary)

(TooLab.)Lab. 研究日誌 このページをアンテナに追加 RSSフィード Twitter

2011 August 28

以前書いたYouTubeのプレイヤーサイズを変えるブックマークレットをユーザスクリプト化させた

結局、今回も言いだしっぺの法則が適用されたわけだ

過去エントリ「IEコンポブラウザではYouTubeのプレイヤーの拡大が効かないみたいなので、ブックマークレットでどうにかしてみた」の最後で以下の様に書いていた。

ここまで書いてやる気が失せたので、誰かSeaHorseスクリプト化してボタンを挿入してそれのクリックで切り替えられるようにしてくれないですかね?w


で、なんとなくそのやる気が出たので頑張ってみました。
ついでに先日FUCであった質問に答えられるしね。

まぁ、aタグ作ってhrefに先のブックマークレット突っ込むだけというお手軽仕様。
ちなみに無理やり同じようなサイズにリサイズさせてるだけです。
ただ、それだけじゃなんなので動画ページ開いたときにもプレイヤーサイズ変更可能にしてみました。
デフォルトの設定はワイドサイズな状態ですが、それ以外の大きさが良い方はスクリプトの頭の方にある「var playersize = "wide";」の"wide"の箇所を"default"、"max"、"full"のいずれかにしてください。*1

今回もWin7 SP1 x64 + IE9 + Sleipnir 2.9.7環境でのみテストしているので、動作の保証はいたしません。


YouTubePlayerResizeLinklet.user.js *2

// ==UserScript==
// @name         YouTube Player Resize Linklet
// @author       破楽戸.*
// @include      http://www.youtube.com/watch?*v=*
// ==/UserScript==

(function() {
	// "default", "wide", "max", "full" のいずれかにしてください。
	var playersize = "wide";
	
	
	if(!document.getElementById("change-default-player-size")) {
		var def = document.createElement("a");
		def.id = "change-default-player-size";
		def.href = "javascript:(function(){var%20ps=document.getElementById(\"watch-player\").style;ps.width=\"640px\";ps.height=\"390px\";ps.marginLeft=\"0\";var%20cs=document.getElementById(\"watch-video-container\");cs.style.filter=\"\";var%20ss=document.getElementById(\"watch-sidebar\").style;ss.marginTop=\"-390px\";scroll(0,0);})();";
		def.innerText = "D";
		def.title = "Default player size";
		def.style.display = "block";
		def.style.width = "24px";
		def.style.height = "24px";
		def.style.borderBottom = "1px solid #acacac";
		def.style.borderRight = "1px solid #dfdfdf";
		def.style.borderLeft = "1px solid #dfdfdf";
		def.style.float = "left";
		def.style.color = "#666";
		def.style.fontSize = "16px";
		def.style.textDecoration = "none";
		def.style.marginRight = "4px";
		def.style.textAlign = "center";
		def.style.filter="progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fefefe,EndColorStr=#e0e0e0)";
		document.getElementById("watch-actions").appendChild(def);
	}
	if(!document.getElementById("change-wide-player-size")) {
		var wid = document.createElement("a");
		wid.id = "change-wide-player-size";
		wid.href = "javascript:(function(){var%20ps=document.getElementById(\"watch-player\").style;ps.width=\"960px\";ps.height=\"510px\";ps.marginLeft=\"auto\";var%20cs=document.getElementById(\"watch-video-container\");cs.style.filter=\"progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#555555,EndColorStr=#333333)\";var%20ss=document.getElementById(\"watch-sidebar\").style;ss.marginTop=\"0\";scroll(0,0);})();";
		wid.innerText = "W";
		wid.title = "Wide player size"
		wid.style.display = "block";
		wid.style.width = "24px";
		wid.style.height = "24px";
		wid.style.borderBottom = "1px solid #acacac";
		wid.style.borderRight = "1px solid #dfdfdf";
		wid.style.borderLeft = "1px solid #dfdfdf";
		wid.style.float = "left";
		wid.style.color = "#666";
		wid.style.fontSize = "16px";
		wid.style.textDecoration = "none";
		wid.style.marginRight = "4px";
		wid.style.textAlign = "center";
		wid.style.filter="progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fefefe,EndColorStr=#e0e0e0)";
		document.getElementById("watch-actions").appendChild(wid);
	}
	if(!document.getElementById("change-max-player-size")) {
		var max = document.createElement("a");
		max.id = "change-max-player-size";
		max.href = "javascript:(function(){var%20ps=document.getElementById(\"watch-player\").style;ps.width=document.body.clientWidth-2+\"px\";ps.height=(document.body.clientWidth*390/640)+\"px\";ps.marginLeft=\"-\"+Math.floor((document.body.clientWidth-960)/2-6)+\"px\";var%20cs=document.getElementById(\"watch-video-container\");cs.style.filter=\"\";var%20ss=document.getElementById(\"watch-sidebar\").style;ss.marginTop=\"0\";scroll(0,cs.offsetTop);})();";
		max.innerText = "M";
		max.title = "Max player size"
		max.style.display = "block";
		max.style.width = "24px";
		max.style.height = "24px";
		max.style.borderBottom = "1px solid #acacac";
		max.style.borderRight = "1px solid #dfdfdf";
		max.style.borderLeft = "1px solid #dfdfdf";
		max.style.float = "left";
		max.style.color = "#666";
		max.style.fontSize = "16px";
		max.style.textDecoration = "none";
		max.style.marginRight = "4px";
		max.style.textAlign = "center";
		max.style.filter="progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fefefe,EndColorStr=#e0e0e0)";
		document.getElementById("watch-actions").appendChild(max);
	}
	if(!document.getElementById("change-full-player-size")) {
		var ful = document.createElement("a");
		ful.id = "change-full-player-size";
		ful.href = "javascript:(function(){var%20ps=document.getElementById(\"watch-player\").style;ps.width=document.body.clientWidth-2+\"px\";ps.height=document.body.clientHeight+\"px\";ps.marginLeft=\"-\"+Math.floor((document.body.clientWidth-960)/2-6)+\"px\";var%20cs=document.getElementById(\"watch-video-container\");cs.style.filter=\"\";var%20ss=document.getElementById(\"watch-sidebar\").style;ss.marginTop=\"0\";scroll(0,cs.offsetTop);})();";
		ful.innerText = "F";
		ful.title = "Full player size";
		ful.style.display = "block";
		ful.style.width = "24px";
		ful.style.height = "24px";
		ful.style.borderBottom = "1px solid #acacac";
		ful.style.borderRight = "1px solid #dfdfdf";
		ful.style.borderLeft = "1px solid #dfdfdf";
		ful.style.float = "left";
		ful.style.color = "#666";
		ful.style.fontSize = "16px";
		ful.style.textDecoration = "none";
		ful.style.marginRight = "4px";
		ful.style.textAlign = "center";
		ful.style.filter="progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fefefe,EndColorStr=#e0e0e0)";
		document.getElementById("watch-actions").appendChild(ful);
	}

	if(document.getElementById("baseDiv")) {
		var ps=document.getElementById("watch-player").style;
		var cs=document.getElementById("watch-video-container");
		var ss=document.getElementById("watch-sidebar").style;ss.marginTop="0";
		
		if(playersize == "wide") {
			ps.width="960px";
			ps.height="510px";
			ps.marginLeft="auto";
			cs.style.filter="progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#555555,EndColorStr=#333333)";
			ss.marginTop="0";
			scroll(0,0);
		}else if(playersize == "max") {
			ps.width=document.body.clientWidth-2+"px";
			ps.height=(document.body.clientWidth*390/640)+"px";
			ps.marginLeft="-"+Math.floor((document.body.clientWidth-960)/2-6)+"px";
			cs.style.filter="";
			ss.marginTop="0";
			scroll(0,cs.offsetTop);
		}else if(playersize == "full") {
			ps.width=document.body.clientWidth-2+"px";
			ps.height=document.body.clientHeight+"px";
			ps.marginLeft="-"+Math.floor((document.body.clientWidth-960)/2-6)+"px";
			cs.style.filter="";
			ss.marginTop="0";
			scroll(0,cs.offsetTop);
		}else {
			ps.width="640px";
			ps.height="390px";
			ps.marginLeft="0";
			cs.style.filter="";
			ss.marginTop="-390px";
			scroll(0,0);
		}
	}

}());

他のSeaHorseとの読み込み順の問題などでスクリプトが2回実行される場合があります。
一応対策していますが。
ただ、自動でプレイヤーサイズ変える部分の対策が思いつかなかったので、そこは勘弁してね。
「通常サイズ→設定サイズ→通常サイズ→設定サイズ」となって最終的に問題ないはずだしね。

*1:ブックマークレットでは"fill"としていますが、リンクテキストで頭文字"f"が複数あると困るので"wide"に変更

*2:Bookmarklet は Bookmark + let なんで Link + let 的な。Bookmarklet Linkで良い気もするけどw

投稿したコメントは管理者が承認するまで公開されません。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証