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


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

 

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

 

 

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

 

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

170813 0007

 

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

170813 0006

 

 

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

 

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

 

ChromeとFirefoxの場合

埋め込みコード

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

 

埋め込んだ動画

 

 

Safariの場合

埋め込みコード

<div style="position:relative;height:0;padding-bottom:56.25%"><iframe src="https://www.youtube.com/embed/4QzsuHG31JY?ecver=2" width="640" height="360" frameborder="0" style="position:absolute;width:100%;height:100%;left:0" allowfullscreen></iframe></div>

 

埋め込んだ動画

 

 

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での埋め込んだ動画の形が変になっていることにお気づきでしょう。

 

 

ChromeとFirefoxでの埋め込んだ動画のスクリーンショット

このように高さが異なってしまっています。

IMG 1891 22

 

Safariでの埋め込んだ動画のスクリーンショット

縦横の比率がそのまま反映されています。

IMG 1892 22

 

この方法はウェブデザインではiframeを用いるときよく使われているテクニックですが、Safariはこれを自動でやってくれているのですね!

 

ということでマック使いのブロガーの皆さんは積極的にSafariでYouTubeへのリンクを貼りましょう♪

 

 

不思議

 

不思議なのは、なぜChromeではなくSafariのみなのかということです。アップルがiPhoneから見やすくするためにというのは分かりますが、GoogleのYouTubeなのはちょっと変な気分ですね。

PAK105215423 TP V



 

↓この記事が参考になったら拍手(どなたでも可)、ツイート、いいね、はてブ、をお願いします。今後のブログ作りに役立てたいので。

関連記事

プロフィール

てぃー

Author:てぃー
詳しい自己紹介:こちら
Twitter:@teapipin


follow us in feedly 
にほんブログ村 IT技術ブログへ にほんブログ村 PC家電ブログへ
現在の閲覧者数:

ブログ内検索
今日のアクセス数の多い記事
カレンダー

07月 | 2017年08月 | 09月
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
過去記事ダイジェスト
お知らせ
ツイッター分析の分析結果が新潟大学教育学部の論文に引用
教育の実証研究の場でも高く評価!

ツイッター分析の分析結果が和歌山大学防災研究教育センターの論文に引用
防災の研究において評価!

2015年版ツイッター分析(世界編)が始動!
今回は世界の国別・言語別ツイートを分析!

ツイッター分析の分析結果が慶應義塾大学有名教授の研究論文などに引用
文系の研究までも制覇!

Interval Timer EX
有名雑誌「Mac Fan 2015月2月号」に「インターバルタイマーEX」が3度目の掲載!ポモドーロテクニックに有効!

自作Macアプリ3部作が2014年 Vector 年間ダウンロードランキング Mac トップ100にすべてランクイン

TimeCalcを公開しています!
時間計算、年齢計算、学歴欄作成など。

ツイッター分析の分析結果が人工知能の研究に!
ブログが学会発表で引用されました。

今まで開発したiPhoneアプリのソースコードを公開しています!
勉強に役立ててください。


2013年 Vector 年間ダウンロードランキング Mac トップ100に「デジカメ変更日を撮影日に一括変更 for Mac」と「インターバルタイマーEX」がランクイン

Interval Timer EX
有名雑誌「Mac Fan 2013月4月号」に「インターバルタイマーEX」が2度目の掲載!!

リアルタイムツイッター地図
リアルタイムツイッター地図を公開しています!
位置情報付きツイートをリアルタイムに表示します。

新たなツイッター分析としてイベントツイート分析を行っています!

2012年8月1日(水)開催の「Twitter勉強会」で発表
ツイッター調査:約173万ツイートを調査して分かったTwitterの利用動向 #twtr_hack from teapipin


Interval Timer EX
有名雑誌「Mac Fan 2012月3月号」に「インターバルタイマーEX」が掲載!!



 

はてなブックマークの人気記事
ツイート&いいね!ランキング