YouTubeの共有用「埋め込みコード」はブラウザによって内容が異なる！Safariは特別仕様であることが判明！

2017-08-13 (日) 19:40　Tips 　

---2017/09/17 追記----

数日前のYouTubeの仕様変更のためか本記事で紹介したSafariの方法は使えなくなったようです。。。（涙）

---------------------------

どうやらYouTubeの共有用「埋め込みコード」はブラウザによって内容が異なるようです！！

以下てぃーの動画「GarageBand処女作」（笑）を例にとります。

YouTubeの共有用「埋め込みコード」とは？

Windowsやマックの場合の話です。YouTubeで動画を共有する場合、「共有」を選択するとTwitterやフェイスブックなどのボタンが出現します。

このとき「埋め込みコード」をクリックすると、主にブログ記事に貼るとき用にHTMLコードが表示されます。これが「埋め込みコード」です。

埋め込みコードはブラウザによって異なる

今まで気がつかなかったのですが、どうやら「埋め込みコード」はブラウザによって異なるようです。てぃーが持っているマックのブラウザで検証したところ、ChromeとFirefoxは同じでしたが、Safariは異なっていました。

ChromeとFirefoxの場合

埋め込みコード

埋め込んだ動画

Safariの場合

埋め込みコード

埋め込んだ動画

Safariによるメリット

Safariの場合、iframeタグがdivタグで囲まれていることが特徴です。内側のiframeタグ内ではstyleでwidth:100%;height:100%;とし、幅と高さを共に100%としています。一方でその外側のdivタグでpadding-bottom:56.25%とし、幅と高さの比を16:9に固定しています（9/16 = 56.25%）

元の動画が16:9以外の場合もそれに合わせて同じ比率になるように設定してくれます。（例えば4:3の場合は75.0%）

Safariの場合メリットは、スマホで表示させたときに形がいびつにならないことです。この記事をスマホから見ている方はChromeとFirefoxでの埋め込んだ動画の形が変になっていることにお気づきでしょう。