- 更新日: 2020年07月10日
- 公開日: 2020年04月09日
【Webデザイナー&ユーチューバー必見】Webページのiframe作法3選
YouTube.com が Google.com をトラフィックで抜き、ますます YouTube（動画） が主役となりつつある私達の端末画面。
そして Web コンテンツにしてもブログにしても、 "動画 + Webコンテンツ" がセットになる傾向にあります。 YouTube については <iframe> タグで簡単に動画を Webページ内に埋め込める一方で、ページの読み込みスピードが遅くなるというデメリットが。
今回は、今後ますます利用する機会が増えるであろう YouTube の埋め込み処理 <iframe> についてご紹介します。
【Webデザイナーとユーチューバー必見】Webページヘのiframe作法3選
iframe処理の違いによるページ読み込み速度の違い
上記グラフのデータ
| パソコン | Android | |
|---|---|---|
| wordpress | 2020 | 4040 |
| normal | 2180 | 2890 |
| lazy | 645 | 1800 |
| JavaScript | 1570 | 843 |
| srcdoc | 523 | 347 |
まず YouTube の動画埋め込み処理（<iframe>） の処理内容によってどれだけ差が出るかを確認。上図は 1つの YouTube 動画を Webページで読み込む場合の処理速度を表したものです。
一番左の WordPress は、投稿編集内（post）に YouTube を埋め込んだ場合、 normal は単なる HTML コード内に YouTube のシェア機能で紹介される <iframe> コードを埋め込んだ場合。 lazy は、 ブラウザ： Chrome や FireFox で対応している loading="lazy" を利用した場合、 JavaScript については YouTube 動画のサムネイル画像をタップすると YouTube動画を読み込む処理とした場合、 srcdoc も JavaScript と同じ処理フローで、 HTML コードで処理した内容になります。
Android の端末については、 normal の場合と srcdoc の場合で 8倍も読み込み速度が違い、モバイルファースト時代の現代において YouTube の埋め込みコード <iframe> をそのまま利用するのは ❌ かも... という事実。
また稀なケースかもしれませんが、 1つのページ内に複数 YouTube 動画を埋め込みたい、複数 <iframe> を使いたい、という場面もあるかもしれません。この場合の読み込み速度の違いも normal と srcdoc では顕著で、 Android の場合は 14倍も読み込み速度が違ってきます（下図参照）。
上記グラフのデータ
| パソコン | Android | |
|---|---|---|
| normal | 9540 | 28930 |
| lazy | 5360 | 25750 |
| JavaScript | 1390 | 3660 |
| srcdoc | 790 | 2020 |
以下に上図グラフで計測使用した HTML ページをリンク集にしましたので、よろしければご自身の端末でスピード感の違いを試してみて下さい。
iframe の処理内容による読み込みスピードの違いを試すページ
それでは normal の <iframe> に比べて、一定の効果のある lazy や JavaScript処理、 srcdoc についてご紹介していきます。
iframeをloading="lazy"で処理する場合
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/9gTkJa7esTc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
loading="lazy" は、上記コードの様に <iframe 内にコードをセットして使います。 <iframe> の他に <img> に対しても有効で、 loading="lazy" で指定したコンテンツの読み込みを 遅延 させる特徴がありますね。ただし "遅延" には条件がありまして、 一定の"しきい値"以上の場合に対して遅延する仕様となっています（ZOZOテクノロジーより）。
例えば 通信環境： 4G で <iframe> の場合は、 4000px 以上上部にスペースがある場合に loading="lazy" は実行され、 ページ上部に <iframe> がある場合は loading="lazy" が有効となりません。
そして対応するブラウザも限定的で、 Safari は ❌ です。
また Android の場合は、 normal で <iframe> を読み込んだ場合と loading="lazy" で <iframe> を読み込んだ場合でそれほど違いがない、という事実も。ページ下部で画像や動画を埋め込みたい時にのみ loading="lazy" は利用できそうですね。
上記以外にも lazy は、 JavaScript処理の onload() に影響する、というレポートも上がっています。ご注意下さい。
iframeをJavaScriptで処理する方法
今回ページ読み込み時は YouTube のサムネイル画像を表示し、画像タップで動画を読み込む JavaScript 処理としました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<style>
.youtube-img{
width:560px;
height:315px;
}
</style>
</head>
<body>
<div class="youtube-video-place-0" data-yt-url="https://www.youtube.com/embed/WgFTPeBDkqI?rel=0&showinfo=0&autoplay=1">
<img src="https://i.ytimg.com/vi/WgFTPeBDkqI/hqdefault.jpg" async class="play-youtube-video-0 youtube-img">
</div>
<script>
// YouTube iframe
var video_wrapper0 = $('.youtube-video-place-0');
if(video_wrapper0){
$('.play-youtube-video-0').on('click', function(){
video_wrapper0.html('<iframe width="560" height="315" allowfullscreen frameborder="0" class="embed-responsive-item" src="' + video_wrapper0.data('yt-url') + '"></iframe>');
});
}
</script>
</body>
</html>
上記コードのページ： https://ripple.jp.net/codecampus/iframe_test/single-iframe-js.html
YouTube動画のサムネイル画像については、
https://i.ytimg.com/vi/ ビデオID /hqdefault.jpg
で取得でき、 iframe のサイズ等は JavaScript 内で指定。
loading="lazy" に比べると、 "しきい値" やブラウザに関係なく <iframe> の読み込みを早めてくれます。ただし、実際に動画を視聴する際は画像をタップして動画を読み込むため、 1秒程のタイムラグが発生。スムーズにコンテンツを閲覧してもらいたい時には、もうひと工夫必要かもしれませんね。
iframeをsrcdocで処理する方法
今回試した中で一番効果のあった srcdoc、 そんなプロパティ知らないという方も少なくないと思います。
【通常の iframe コード】
<iframe src="src-base.html"></iframe>
【結果】
こちらは普通の iframe 処理、 元ページの内容が表示されていることが確認できます。
【srcdoc の iframe】
<iframe srcdoc="<h1>Hello srcdoc</h1>" src="src-base.html">
</iframe>
【結果】
今度は srcdoc を使った場合で、 <iframe src="src-base.html"> と指定しているにも関わらず、 src-base.html の内容は無視されて、 srcdoc の内容が表示されています。
つまり iframe の srcdoc を使うと、埋め込みページの上書きができるということですね。この仕組みを利用して、 YouTube の <iframe> 処理を以下のように高速化。
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/9gTkJa7esTc"
srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style>
<a href=https://www.youtube.com/embed/9gTkJa7esTc?autoplay=1>
<img src=https://img.youtube.com/vi/9gTkJa7esTc/hqdefault.jpg alt='オシママサラの動画です'><span>▶</span>
</a>"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
title="iframe srcdoc test"
></iframe>
参考： css-tricks.com/
処理内容としては、 srcdoc の部分で YouTube動画のサムネイル画像を表示し、その画像には <a> タグの動画リンク付きでセット。そしてサムネイル画像がタップされればリンク先の動画を表示、という流れです。
allow属性にはいろいろ書かれていますが、これは特にスマホで埋め込み動画を視聴する場合の環境コード。
上記のプログラムで正常に YouTube の埋め込み動画は稼働するのですが、ちょっと HTML をご存知の方からすると 「あれっ、 href= のあとに "" がない...」 と思うはず。 srcdoc、少し普通の HTML とは違った書き方をして、処理を実行しますね。 もっと詳しく srcdoc を知りたい方は、 suikawiki を参考にしてみて下さい。
Webページの読み込みスピードの目安
今回 YouTube の埋め込み動画処理 <iframe> に関する処理をご紹介させて頂きましたが、そもそも Web ページってどれぐらいのスピードで読み込まれるのが ○ かご存知でしょうか？ 一つの目安には "3秒ルール" があります。
これはページを 3秒以内に読み込まないと 4割のユーザーがページ離脱するため、と統計されているため。もしご自身でブログや Webページを運営されている方は、一度ブラウザの "開発者モード" で確認してみて下さい。
尚、ブラウザにはキャッシュ機能が付いていますので、正確な読み込みスピードを計測する時は、一旦閲覧履歴・キャッシュの削除を行ってからご確認ください。また Google の スピード・テスト も簡単に計測できて便利と思います。
＼一流デザイナーのスキルが身に付く／
まとめ
プライベートな Web制作ならまだしも、顧客の Webページを作成する際には "読み込みスピード" や "Googleのモバイル判定" 気になりますよね。
今回ご紹介した <iframe> 処理が、一つのテクニックとしてご参考、ご活用頂ければ幸いと思います。
また独学で WordPress や ブログ はじめたものの、動画の埋め込みをはじめ、レスポンシブ対応、読み込みスピード、動画視聴制御が上手くいかない、とストレスを抱えておられる方もいらっしゃることでしょう。一人での学習が難しかったら、 プロのサポート、レッスンに頼ってみませんか？
CodeCamp では現役エンジニアによるオンライン・マンツーマンレッスンを提供していますので、忙しい方でも大丈夫。 せっかく興味持ってやっている Web、 しっかりと基礎を固めて、 "ビッグなスキル" に成長させてみませんか？
- この記事を書いた人
- オシママサラ
