Youtubeの埋め込みを高速化

サイトスピードの向上のため、Youtubeの埋め込みを高速化する。

１．記事の一番前に下記コードを貼り付け

Javascriptコード

<script>
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

２．Youtubeの埋め込みコードを取得し、記事内に貼り付け

Youtube の動画の右下にある「share」ボタンをクリック。

「embed」をクリックし、リンクをコピー。

記事内に貼り付ける。

３．埋め込みコードをちょっとだけいじる

変更前：

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/……>

変更後：

<iframe width=”560″ height=”315″ data-src=”https://www.youtube.com/embed/……>

もしうまくいかなければ、「data-src=」の前に「src=""」を追加してみる。

sacではなく、data-srcを参照するように、という意味。

・
・
・

４．完了

References