【ブログカスタマイズ】「はてなブログ」に埋め込む「Youtube動画」を劇的に軽くする方法

f:id:redo5151:20200102231229p:plain

Youtube動画をブログに埋め込むときに動画のデータを軽くし、サイトの読み込みを早くする方法をご紹介します。

最近、私のブログで音楽を扱った記事が急激に増えているので、たくさんのYoutube動画を埋め込む機会が増えてきました。

動画が簡単に埋め込めるのは便利なのですが、その反面サイトの読み込み速度が更に遅くなってしまいます。

そこで、どうにかいい方法は無いかと探していたところ「Youtube動画を軽くする方法」が見つかったので紹介します。

YouTube動画を軽くする利点に関して
- その他のサイトの読み込みが遅くなる項目
動画を軽くすると見え方はどう変わるの？
動画データを圧縮してサイトの読み込みを早くする方法
まとめ

YouTube動画を軽くする利点に関して

f:id:redo5151:20200102231750p:plain

サイトの読み込み速度があまりに遅いことによりブログを見に来た人が見る気を失ってしまうことを防ぐためです。

最近は携帯でブログを見る人がほとんどなので、いかにサイトを軽くできるかはSEOの観点からも大切です。

特に「無料版のはてなブログ」ははてなブログ自体の広告も入ってくるので、ただでさえ読み込み速度が遅いです。

その他のサイトの読み込みが遅くなる項目

サイトの読み込み速度遅延原因

・画像データ
・広告
・はてなスター機能
・コメント機能
・SNSボタン(はてなブックマークの数表示など)

これらの表示はサイトの読み込みの観点からは全て不要な機能です。ですが、消したくない方がほとんどだと思います。

そこで少しでも動作を遅くする要因として減らせるものは減らすべきです。

Youtubeの埋め込みを軽くする方法は、画像や動画データの圧縮は見た目としてはほとんど変わらないという点から、最も効果的な方法の一つです。

ぜひ動画をよく埋め込む方は軽くする方法を導入してみましょう。

動画を軽くすると見え方はどう変わるの？

まずはそのままYoutubeを埋め込んだ場合を見てみましょう。

画面いっぱいにサムネイルが埋め込まれパソコンで見た場合も大きく表示されて見栄えはいいですね。

次にこちらが動画を軽くした場合です。

パソコンやタブレットで見た場合は少し小さく表示されますが、そこまで気になりませんね。これで大幅にサイトを軽くできるなら全く気にならないレベルです。

動画データを圧縮してサイトの読み込みを早くする方法

STEP

デザインCSSにCSSコードをコピペする

「管理画面→デザイン→カスタマイズ→デザインCSS」に下記コードを貼り付けましょう。

/*youtube軽くする*/

.youtube {

	display: inline-block;

	position: relative;

	overflow: hidden;

	width: 320px;

	height: 180px;

}

.youtube::before {

	position: absolute;

	content: "Click to Play";

	color: #fff;

	text-align: center;

	font-size: 22px;

	font-weight: bold;

	line-height: 180px;

	background: rgba(0, 0, 0, 0.6);

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	z-index: 10;

	transition: all 0.3s;

}

.youtube:hover::before {

	background: rgba(0, 0, 0, 0.7);

	cursor: pointer;

	transition: all 0.3s;

}

※事前にバックアップは必ず取ってください。

また、CSSでは自分のテーマデザインの影響でうまく機能しない場合がありますので、その場合は上のコードにそれぞれ<style>～</style>で囲って記述してあげましょう。

アレンジ可能な箇所

「content: "Click to Play"」の部分の表現を変更すれば、任意のメッセージに変更することも可能です。日本語で「クリックして再生」もしくは「再生」「▷」「PLAY」など好きなアイコンや表現言い回しにかえると良いと思います。

STEP

HTML編集へコードをコピペする

はてなブログの場合のHTMLコード

最初に「HTML編集」内に下記HTMLコードを貼り付けてください。

<div class="youtube" data-video="https://www.youtube.com/embed/動画ID?autoplay=1"><img src="https://img.youtube.com/vi/動画ID/mqdefault.jpg" alt="" width="320" height="180" /></div>

上のコード内に「動画ID」が２カ所あると思うので、そこの動画IDをYoutube動画のURLへ置き換えます。

f:id:redo5151:20200102224955p:plain

<div class="youtube" data-video

="https://www.youtube.com/embed/

_4DvuTGx5mw?autoplay=1">

<img src="https://img.youtube.com/vi/

_4DvuTGx5mw/mqdefault.jpg"

alt="" width="320" height="180" />

</div>

青字で表示されている「_4DvuTGx5mw」のカッコ内にかかれている英数字が個別の動画IDになります。

STEP

HeadにJQueryを読み込む

「管理画面→設定→詳細設定→headに要素を追加」で下記コードを追加しましょう。

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>

STEP

記事下にコードを追加

記事下に下記コードを貼り付けましょう。これを貼り付けないと動画が再生しません。

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script><script>// <![CDATA[

$('.youtube').click(function(){

video = '<iframe src="'+ $(this).attr('data-video') +'" frameborder=

"0" width="480" height="270"></iframe>

';$(this).replaceWith(video);});// ]]>

</script>