HTML-CSS

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

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

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>

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

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

変更前:
<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を参照するように、という意味。

4.完了

References

にほんブログ村 科学ブログ 脳科学へ
にほんブログ村 子育てブログ 海外ワーキングマザー育児へ
PVアクセスランキング にほんブログ村