ページに埋め込まれたYouTube動画。「大きな画面でみたい」「コメント読みたい」って時にいろいろ面倒なのがIEのポップアップブロックの存在。それをブックマークレットで回避するという話。
こんな時にどうしてます？
たとえば、こんな感じ。
- 画面が小さいので、YouTubeのサイトに移って大きな画面で見たい
- コメント見たいからYouTubeのサイトに移りたい
そんなことはよくあるはず。ムービーの動画枠の上に表示されるタイトルをクリックすれば、YouTubeのサイトに移動するってのは、みなさん御存知のとおり。
上の画面みたいにカーソルを持っていくわけですね。
しかし、ここでクリックすると現れるのがIEの「ポップアップブロック」。
IEの下のほうに出ますよね（上の画像はクリックで拡大）。
「一度のみ許可」だと2回目以降が面倒。「このサイトのオプション」で「常に許可」ってやっちゃうのも気が引ける。「常に許可」ってやっちゃったあとに、やっぱりなしにしたいと思ってもいろいろ面倒。
「IEなんて使ってるからだよ！」なんて声もあろうかと思いますが、シェアNo.1のブラウザをいつも使ってることで気づく問題もあるってことで。普段から使ってないと、Web作成時になんか問い合わせ来ても対応できないじゃないですか。とか、いろいろ。
そういうわけで作ったのが今回のブックマークレット。
どうやって使う？ どんな動作？
効果は単純。以下の図をどうぞ（画像なのでクリックも再生もできません）。
左が元の状態（Before）、右がブックマークレットを使ったあとの状態（After）。ブックマークレットは通常のブックマーク、お気に入り同様、クリックするだけ。ページ移動の代わりにJavaScriptのプログラムが動きます。
Beforeでは存在しなかったテキストリンクが、Afterでは動画の下に表示されます。このリンクをクリックすることで、YouTubeのページが別ウィンドウで開くという寸法です。単純！
ブックマークレットを起動する手間は増えますが、ポップアップブロックのオプションだとか面倒なことは考えなくてOK。ブラウザ側の設定を変更する必要もないですし、設定変更して以前の状態がわからなくなった、なんてこともありません。
なお、サイドバーに動画をいっぱい埋め込んでるブログなんてのも時折目にしますが、そういう場合でもこのブックマークレットは有効です。動画がいくつあっても、しっかりそれぞれの動画にリンクを追加してくれます。
JavaScriptを使ったプログラムなので、修正も簡単にできるっていうメリットがあったりしますが、まあ、使う側にとってはそれはどうでもいいですね。
じゃあ、続いて導入方法です。
ブックマークレットの導入
以下がブックマークレット。
上の枠のタイトル部分のリンク（「YouTube 別ウィンドウで開く」）をブラウザのお気に入りバーにドラッグとか、右クリックで「お気に入りに追加」とかで登録してください。
お気に入りバーが表示されていないよ！という場合は、[表示」メニュー－[ツールバー]－[お気に入りバー]で、表示をONにしてから、ドラッグしてください。
IE以外の場合はブックマークとか、リンクバーだったり、名称が違いますがまあわかりますよね。
一度登録が済めば、この作業はもういりません。あとは、YouTube動画が埋め込まれたページで、このブックマークレットを起動すれば、先の例のように動画の下にリンクが追加されます。
もしかして、動画をクリックしてもリンクが出ないiOSにも有効かも。今気づいた。
メモとかいろいろ
実際のところ、使う人はほぼいないとは思いますが、勉強の成果を残すってことで。
ちなみに、YouTube動画の埋め込みには、現在主流のiframeタグを使ったコードのほか、それ以前使われていたobjectタグ、embedタグを利用したものの2種類があります。ここで紹介したブックマークレットは両方に対応しています。ほかにもパターンがあるのかもしれませんが、その場合は教えていただけるとうれしいです。
また、このブックマークレットが対応するのは埋め込み動画は単一のファイルのもののみ。プレイリストを埋め込んだものはテストもしてません（面倒なので）。
あと、Webページを見る側でなく作る側の場合。自身のページに動画を埋め込む際は、ポップアップブロックで見る人を悩ませないように、最初からテキストリンクを追加するってのもいいと思いますよ。SEO的にもなんかいいかもしれないですし。ということで、以前作ったブックマークレットがこれでした。
YouTubeリンク作成ブックマークレット テキストリンク＆はてなブックマーク数付き
これを使うと、一発で動画とテキストリンク、はてブのブックマーク数が付加できます。以下のような感じ。
Oirase Moutain Stream – 奥入瀬渓流を歩く with Hague MMC
横幅も指定できます。一応、紹介。
さらについでに。ブックマークレットが増えてくると大事なものが見つかりにくかったり、管理が面倒だったりします。ウチではお気に入りバー内にフォルダを作ってそこに入れるようにしてます。これもオススメ。
今回のブックマークレットと関係あるようなないような話でしたが。
なんかありましたらコメントとかで。では、よろしくお願いしまーす。
コメント