« iTunesアフィリエイト PHGへのURL置換を力技でやったよ! リンクシェア用160件分をPHG用に変換 | トップページ | トヨタAQUAのCMソングはチョコレイト・ディスコなんだよなあ »

2013年9月 5日 (木曜日)

埋め込みYouTube動画でポップアップブロックを回避するブックマークレット IE用

 ページに埋め込まれたYouTube動画。「大きな画面でみたい」「コメント読みたい」って時にいろいろ面倒なのがIEのポップアップブロックの存在。それをブックマークレットで回避するという話。

こんな時にどうしてます?

 たとえば、こんな感じ。

  • 画面が小さいので、YouTubeのサイトに移って大きな画面で見たい
  • コメント見たいからYouTubeのサイトに移りたい

 そんなことはよくあるはず。ムービーの動画枠の上に表示されるタイトルをクリックすれば、YouTubeのサイトに移動するってのは、みなさん御存知のとおり。

Ieyoutube1

 上の画面みたいにカーソルを持っていくわけですね。

 しかし、ここでクリックすると現れるのがIEの「ポップアップブロック」。

Ieyoutube2

 IEの下のほうに出ますよね(上の画像はクリックで拡大)。

 「一度のみ許可」だと2回目以降が面倒。「このサイトのオプション」で「常に許可」ってやっちゃうのも気が引ける。「常に許可」ってやっちゃったあとに、やっぱりなしにしたいと思ってもいろいろ面倒。

 「IEなんて使ってるからだよ!」なんて声もあろうかと思いますが、シェアNo.1のブラウザをいつも使ってることで気づく問題もあるってことで。普段から使ってないと、Web作成時になんか問い合わせ来ても対応できないじゃないですか。とか、いろいろ。

 そういうわけで作ったのが今回のブックマークレット。

どうやって使う? どんな動作?

 効果は単純。以下の図をどうぞ(画像なのでクリックも再生もできません)。

Ieyoutube3

 左が元の状態(Before)、右がブックマークレットを使ったあとの状態(After)。ブックマークレットは通常のブックマーク、お気に入り同様、クリックするだけ。ページ移動の代わりにJavaScriptのプログラムが動きます。

 Beforeでは存在しなかったテキストリンクが、Afterでは動画の下に表示されます。このリンクをクリックすることで、YouTubeのページが別ウィンドウで開くという寸法です。単純!

 ブックマークレットを起動する手間は増えますが、ポップアップブロックのオプションだとか面倒なことは考えなくてOK。ブラウザ側の設定を変更する必要もないですし、設定変更して以前の状態がわからなくなった、なんてこともありません。

 なお、サイドバーに動画をいっぱい埋め込んでるブログなんてのも時折目にしますが、そういう場合でもこのブックマークレットは有効です。動画がいくつあっても、しっかりそれぞれの動画にリンクを追加してくれます。

 JavaScriptを使ったプログラムなので、修正も簡単にできるっていうメリットがあったりしますが、まあ、使う側にとってはそれはどうでもいいですね。

 じゃあ、続いて導入方法です。

ブックマークレットの導入

 以下がブックマークレット。

 上の枠のタイトル部分のリンク(「YouTube 別ウィンドウで開く」)をブラウザのお気に入りバーにドラッグとか、右クリックで「お気に入りに追加」とかで登録してください。

 お気に入りバーが表示されていないよ!という場合は、[表示」メニュー-[ツールバー]-[お気に入りバー]で、表示をONにしてから、ドラッグしてください。

 IE以外の場合はブックマークとか、リンクバーだったり、名称が違いますがまあわかりますよね。

 一度登録が済めば、この作業はもういりません。あとは、YouTube動画が埋め込まれたページで、このブックマークレットを起動すれば、先の例のように動画の下にリンクが追加されます。

 もしかして、動画をクリックしてもリンクが出ないiOSにも有効かも。今気づいた。

メモとかいろいろ

 実際のところ、使う人はほぼいないとは思いますが、勉強の成果を残すってことで。

 ちなみに、YouTube動画の埋め込みには、現在主流のiframeタグを使ったコードのほか、それ以前使われていたobjectタグ、embedタグを利用したものの2種類があります。ここで紹介したブックマークレットは両方に対応しています。ほかにもパターンがあるのかもしれませんが、その場合は教えていただけるとうれしいです。

 また、このブックマークレットが対応するのは埋め込み動画は単一のファイルのもののみ。プレイリストを埋め込んだものはテストもしてません(面倒なので)。

 あと、Webページを見る側でなく作る側の場合。自身のページに動画を埋め込む際は、ポップアップブロックで見る人を悩ませないように、最初からテキストリンクを追加するってのもいいと思いますよ。SEO的にもなんかいいかもしれないですし。ということで、以前作ったブックマークレットがこれでした。

 YouTubeリンク作成ブックマークレット テキストリンク&はてなブックマーク数付きはてなブックマーク - YouTubeリンク作成ブックマークレット テキストリンク&はてなブックマーク数付き: point of view point

 これを使うと、一発で動画とテキストリンク、はてブのブックマーク数が付加できます。以下のような感じ。


Oirase Moutain Stream - 奥入瀬渓流を歩く with Hague MMC

 横幅も指定できます。一応、紹介。

 さらについでに。ブックマークレットが増えてくると大事なものが見つかりにくかったり、管理が面倒だったりします。ウチではお気に入りバー内にフォルダを作ってそこに入れるようにしてます。これもオススメ。

 今回のブックマークレットと関係あるようなないような話でしたが。

 なんかありましたらコメントとかで。では、よろしくお願いしまーす。


|

« iTunesアフィリエイト PHGへのURL置換を力技でやったよ! リンクシェア用160件分をPHG用に変換 | トップページ | トヨタAQUAのCMソングはチョコレイト・ディスコなんだよなあ »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35726/58133463

この記事へのトラックバック一覧です: 埋め込みYouTube動画でポップアップブロックを回避するブックマークレット IE用:

« iTunesアフィリエイト PHGへのURL置換を力技でやったよ! リンクシェア用160件分をPHG用に変換 | トップページ | トヨタAQUAのCMソングはチョコレイト・ディスコなんだよなあ »