【Webデザイナー&ユーチューバー必見】Webページのiframe作法3選


【Webデザイナー&ユーチューバー必見】Webページのiframe作法3選

YouTube.com が Google.com をトラフィックで抜き、ますます YouTube(動画) が主役となりつつある私達の端末画面。

そして Web コンテンツにしてもブログにしても、 "動画 + Webコンテンツ" がセットになる傾向にあります。 YouTube については <iframe> タグで簡単に動画を Webページ内に埋め込める一方で、ページの読み込みスピードが遅くなるというデメリットが。

今回は、今後ますます利用する機会が増えるであろう YouTube の埋め込み処理 <iframe> についてご紹介します。

目次
  1. 【Webデザイナーとユーチューバー必見】Webページヘのiframe作法3選
  2. iframe処理の違いによるページ読み込み速度の違い
  3. iframeをloading="lazy"で処理する場合
  4. iframeをJavaScriptで処理する方法
  5. iframeをsrcdocで処理する方法
  6. Webページの読み込みスピードの目安
  7. まとめ

【Webデザイナーとユーチューバー必見】Webページヘのiframe作法3選

iframe処理の違いによるページ読み込み速度の違い

image

上記グラフのデータ
パソコン 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倍も読み込み速度が違ってきます(下図参照)。

image

上記グラフのデータ
パソコン 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 は ❌ です。

image

https://caniuse.com/#feat=loading-lazy-attr

また 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>

【結果】

image

こちらは普通の iframe 処理、 元ページの内容が表示されていることが確認できます。

【srcdoc の iframe】
<iframe srcdoc="<h1>Hello srcdoc</h1>" src="src-base.html">
</iframe>

【結果】

image

今度は 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ページを運営されている方は、一度ブラウザの "開発者モード" で確認してみて下さい。

image

尚、ブラウザにはキャッシュ機能が付いていますので、正確な読み込みスピードを計測する時は、一旦閲覧履歴・キャッシュの削除を行ってからご確認ください。また Google の スピード・テスト も簡単に計測できて便利と思います。

https://developers.google.com/speed/pagespeed/insights/

一流デザイナーのスキルが身に付く

無料カウンセリングはこちら

まとめ

プライベートな Web制作ならまだしも、顧客の Webページを作成する際には "読み込みスピード" や "Googleのモバイル判定" 気になりますよね。

今回ご紹介した <iframe> 処理が、一つのテクニックとしてご参考、ご活用頂ければ幸いと思います。

また独学で WordPress や ブログ はじめたものの、動画の埋め込みをはじめ、レスポンシブ対応、読み込みスピード、動画視聴制御が上手くいかない、とストレスを抱えておられる方もいらっしゃることでしょう。一人での学習が難しかったら、 プロのサポート、レッスンに頼ってみませんか?

CodeCamp では現役エンジニアによるオンライン・マンツーマンレッスンを提供していますので、忙しい方でも大丈夫。 せっかく興味持ってやっている Web、 しっかりと基礎を固めて、 "ビッグなスキル" に成長させてみませんか?


関連記事

オシママサラ
この記事を書いた人
オシママサラ
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp