YouTube 動画を埋め込むとき、コントロールバーを重ねず動画の外に表示させる小ワザ : 地潜の日記

ブログネタ：: ホームページ制作に参加中！

YouTube の動画をページに埋め込む時って、YouTube が提供する <iframe> を html に書くのが一般的だと思う。
<object> タグを使った Flash プレーヤーだとスマートフォンでの再生が～、なんて理由もあってね。
そんな <iframe> による動画埋め込みで、「コントロールバー」の動画被りをどうにかしよう！ってお話です。

■ YouTube 動画の埋め込み機能
YouTube 動画をページに埋め込むとき、色々な調整ができるようになっている。
動画上部に表示される動画情報の表示／非表示とか、指定した時間から再生とか、色を変えたりもできる。
詳しいところは↓をドーゾ

iframe 組み込みの YouTube Player API リファレンス (via. Google Developers)
YouTube プレーヤーのデモ (via. Google Developers)
YouTube動画の22のパラメータまとめ+αと埋め込みコードの実例 (via. WisdomMingle.com)

■ 「コントロールバー」が動画に被って（重なって）隠れちゃうよね
色々できるとはいえ、YouTube が提供していない機能もある。
今回困ったこととして、埋め込んだ動画の下部に表示される「コントロールバー」、これを動画に被らせず（重ねず）、動画の下部を隠さない、ってのができないのだ。（2015年6月の時点ではね）

例えばこんな風に（↓の 0:20 くらい）、動画下部にテロップがあると、「コントロールバー」に覆われてしまって読めない。

もちろん、動画上からマウスを外せば「コントロールバー」は自動で隠れるのだけれど、ちょくちょくシーンを飛ばしたりしたいときにはわざわざマウスを外すのが面倒。

「コントロールバー」を表示し続けたまま、動画に被らせず、例えば動画の外に表示できる機能があればいいのだけれど…
YouTube が正式に提供していない以上、「あーできないのかー」と多くの場合は諦めるしかない。

んが、しかし！
この「コントロールバー被り」は“小手先”なワザで回避できるので、その方法を紹介しよう。

■ iframe の height を 35 くらい増やすのだ！
はい、結論から言ってしまうと↑ということです。
解説すると…

まず、「コントロールバー」のサイズは↓のとおり。（2015年6月の時点ではね）
youtube_ctrl-bar_size

そのサイズぶん、動画が収まることになる <iframe> の縦幅：height を広げてあげればいいワケです。

<iframe width="560" height="315" src="https://www.youtube.com/embed/rgFgJk0Ci1I" frameborder="0" allowfullscreen></iframe>

　↓　height を大きく！

<iframe width="560" height="350" src="https://www.youtube.com/embed/rgFgJk0Ci1I" frameborder="0" allowfullscreen></iframe>

その結果がコチラ↓

期待通り、コントロールバーが表示され続けたまま、動画に被らず再生できてますね。

■ 問題点
今のところわかっている問題点は以下のとおり。　（回避方法はいろいろあるのだろう）

動画の上部にも「黒帯」ができてしまう。
<iframe> を広げたため、中の動画の配置が縦方向に中央に寄せようとして、で上にも余白として黒帯出現ってことになる。
デザイン優先のページだと、ちょっとダサいですね。
background 色の指定で見かけ上の回避はできるかも。
でもデザイン優先なら「コントロールバー」を表示させないかほうがいいのかな。
動画のサイズ、横縦比によって、height を増やす値の調整を。
「35 ピクセルぐらいを足せ」としましたけど、この「35」という値は適当に調整が必要です。
実際にやってみて、元々の動画の挙動と変わってしまう何てことのないよう、増減してください。