ふーログ

大学生ブロガーがガジェットやアニメ、気になったニュースをまったりと書き留めていく。

ふーログ


メインカテゴリー

スポンサーリンク

おすすめ記事8選!

最新記事

【読み込み速度改善】YouTubeの埋め込みを軽くする方法がすごい!

スポンサーリンク

f:id:FULOG:20161017145734j:plain

どうも、ふーです。

ブログでYouTubeの動画を埋め込みたい時、沢山埋め込んでしまうとページの読み込み時間が長くなってしまいますよね。それを改善してくれる素晴らしい方法がありました。実際に使ってみた感想と、簡単に使い方を紹介。

スポンサーリンク

 

活用した記事

今回活用した記事を紹介します。

 

この記事はこの後に紹介する記事の元になっている記事です。この記事の方法でもうまくいきますが、後で紹介する記事の方法の方が簡単なのでそちらをおすすめします。

www.obanari.com

 

 

この記事では、上の記事を参考に使いやすいようにカスタマイズしています。私が利用したコードはこちらからお借りしました。

shiromatakumi.hatenablog.com

 

こちらでは2つ目の記事「YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった」のコードを自動で作って作れるツールの解説です。

blog.kaerucloud.com

 

 

作り方

 

CSSコードを貼る

ブログのデザインのCSSに以下のコードを追加します。はてなブログでは「デザイン」→「デザインCSS」か「記事」に<style>で囲んで貼り付けます。私は、スマホでも使いたいので、「記事」のところに貼り付けました。

(「YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった - NO TITLE」より)

 

 

javaScriptコードを貼り付ける

記事の一番下に以下のコードを貼り付けます。動画がいくつあろうと、1つのページに1つだけあればいいので、フッターや記事下部分に貼り付けます。

(「YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった - NO TITLE」より) 

 

 

 

HTMLを貼る

HTMLは「YouTubeを埋め込んでも重くならないようにする方法の『コードを自動生成するツール』を作ったよ」で紹介されている「ようつべタグぽん」というツールを使います。

 

 

はじめにYouTubeから動画のURLを取得。

コピーしたURLを「ようつべタグぽん」の「動画URL」に貼り付けます。

f:id:FULOG:20161017142215j:plain

 

URLを貼り付けたら、サムネイルの大きさを選択します。ここの大きさはお好みで選択してください。

f:id:FULOG:20161017142450j:plain

 

 

次に「タグを生成する」を選択

f:id:FULOG:20161017142845j:plain

 

 

出来たコードをコピーして、記事内に貼り付けて完成です。

f:id:FULOG:20161017142854j:plain

 

 

実際に完成したものがこちら

 画像で表示されていますが、クリックすると動画に切り替わります。読み込みが早くなる上、簡単に出来るのですごくオススメです。

 

 

まとめ

記事の読み込み速度も改善されますが、記事を書く画面もすごく軽くなりますしこれは導入しておいて損は無いと思います。私は「そんなにYouTubeの埋め込みなんてしないよ〜」って思っていましたが、最近使うようになったので慌てて導入しました。

早めに導入しておくことをおすすめします。

 

スポンサーリンク