いつまで仕事してるの!ゲームしなさい!

ゲームで育った姉弟による、大人になってもゲームを楽しむブログ。 音楽や絵などの観点からも、作品をもっと味わい掘り下げます!

はてなブログにYouTube動画を埋め込むと重くなる!ので軽くする方法を紹介

f:id:gamestart:20170523174027p:plain ゲーマー姉弟の64弟(@64_oto)です。


YouTube動画をはてなブログに貼るとき、『埋め込み』形式を選択することができますよね。


はてなブログにYouTube動画を貼るときに、埋め込みという機能が使えます。そのときの編集画面


YouTubeに移動せずに記事内で動画が再生できるうえ、サムネイル画像が表示されるので見栄えもよくなるのが嬉しいですよね。


ですがこの埋め込み機能、ページが重くなるという弱点があります。


1つや2つの動画の埋め込みでしたらそこまで重くはなりませんが、たくさん埋め込んでしまうと、かなり重いページになってしまいます。


YouTube動画をたくさん紹介した記事をせっかく書いても、ページが重かったら見てもらえないですもんね……


「この動画とあわせて、この動画とこの動画も並べて貼りたい! でも重くなっちゃう……」

なんてときに軽いまま貼れる解決方法があるので、紹介します!


スポンサーリンク


こんな感じの見た目で軽くなります

まず普通に埋め込みで貼った場合、この見た目になりますよね。

編集画面上でのコード
[https://www.youtube.com/watch?v=sMPDQ69KMKk:embed:cite]

記事に反映される見た目
www.youtube.com


見た目いいですよね〜。
画像として映えるので、ページを彩ってくれます。


しかしこの状態だと、ページを開いたときに動画のぶんまでイッキにがんばって読み込むことになるので、重くなっちゃいます。


このあと紹介する“軽くする方法”で埋め込むとこんな見た目になります

編集画面上でのコード(※横にスライドできます)

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

記事に反映される見た目


サムネイルが少し薄黒くなり『Click to Play』と表示されます。
(『Click to Play』というテキストは任意で変更できます)」


この状態ではまだ動画は読み込まれず、フタをした状態です。
クリック(タップ)してはじめて読み込みが開始されます。

記事を開いたときの読み込みの負担にならないので、ページが軽くなります。



スポンサーリンク



実装はカンタン! 3ステップ

ではここから“軽くする方法”をカンタンに3ステップで説明します。

※PCからの操作方法で説明しております。
スマホからではできないようです(もしやり方があれば教えていただけると嬉しいです!)



① 管理画面のCSSにコードを記述

下記のコードを管理画面からCSSにコピペします。
長くて「なんじゃこりゃ?」となりますよね(笑)

CSSに追加するコード
.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;
}


f:id:gamestart:20170523174027p:plain このコードは、動画を貼ったときの見た目をキレイにする役割を持っています。


上から10行目『content: "Click to Play";』の部分の『" "』内を任意のテキストに書き換えることができますよ!

【例】
content: "タップで再生";


コードの貼り付けかたを画像付きでくわしく説明しました。
はてなブログの管理画面に慣れてなかったらこちらをどうぞ!

説明をひらく

管理画面を開き、左側のバーから『デザイン』を選択します。

はてなブログのデザインCSS編集画面への行き方の説明


次にスパナのマークの『カスタマイズ』タブを選択します。

はてなブログのデザインCSS編集画面への行き方の説明


一覧が表示されるので、その中の『デザインCSS』を選択します

はてなブログのデザインCSS編集画面への行き方の説明


するとコードを記述する欄が表示されます。

はてなブログのデザインCSS編集画面への行き方の説明

ここに先ほどの長めのコードを記述します。


記述する箇所はどこでもOKです。

わかりやすいように、いちばん下に追記するのが無難かもしれません。

はてなブログのデザインCSSにYouTube動画の埋め込みを軽くするコードを記述しました

これで記述完了です!



② 記事内にコードを記述

記事内のいちばん下に下記のコードを記述します。
(※実際のブログ記事にこんな文字列は表示されませんのでご安心を!)

記事一番下に追加するコード(※横にスライドできます)

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


f:id:gamestart:20170523174027p:plain このコードは、貼った動画に魔法をかけてくれるような役割です。

f:id:gamestart:20170523174030p:plain これがないと動画が動きません!



はてな記法、Markdown記法の場合

YouTube動画の埋め込みを軽くするjQueryを記述しました

記事のいちばん下にコピペ! これでステップ2終わり!



見たままモードの場合

まず左上の『編集見たまま』タブから『HTML編集』タブに切り替えます。
『HTML編集』内のいちばん下にコードを貼りつけましょう。

YouTube動画の埋め込みを軽くするjQueryを記述しました

コピペ完了! これでステップ2OK!



スポンサーリンク



③ 動画自体のコードを記事内に貼り付け

動画を貼りたい箇所に下記のコードを貼ります。

コード(※横にスライドできます)

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


f:id:gamestart:20170523174027p:plain YouTube動画には、動画1つ1つに『動画ID』が備わっています。
このIDによって動画のURLが決まっているわけです。

貼りたい動画の『動画ID』を、上記コードの「●●●●」部分に入れると完成です。


画像付きで説明しますね!



はてな記法、Markdown記法の場合

動画を埋め込みたい箇所に先ほどのコードを貼り付けます。

貼り付けるとこんな感じ!
はてなブログにYouTube動画の埋め込みの際に重くなるのを防いでくれる、軽くする方法を説明


●●●●を、貼りたい動画のアドレスにある動画ID(赤字下線)に置き換えます。

はてなブログにYouTube動画の埋め込みの際に重くなるのを防いでくれる、軽くする方法を説明
(『v=』のあとが動画IDです)

はてなブログにYouTube動画の埋め込みの際に重くなるのを防いでくれる、軽くする方法を説明


置き換え完了しました!

これで終わり! 全ステップ完成です!



見たままモードの場合

はてなブログにYouTube動画の埋め込みの際に重くなるのを防いでくれる、軽くする方法を説明
例でこのあたりに貼ってみますね!


左上の『編集見たまま』から『HTML編集』に切り替えます。

はてなブログにYouTube動画の埋め込みの際に重くなるのを防いでくれる、軽くする方法を説明

動画を貼りたい部分に先ほどのコードを貼ります。
はてなブログにYouTube動画の埋め込みの際に重くなるのを防いでくれる、軽くする方法を説明

「どこに貼りゃいいんだ!?」と一瞬ビビりますが、前後の文章を目印にすれば貼る位置がわかります!


貼り付けるとこんな感じ!
はてなブログにYouTube動画の埋め込みの際に重くなるのを防いでくれる、軽くする方法を説明


●●●●を、貼りたい動画のアドレスにある動画ID(赤字下線)に置き換えます。

はてなブログにYouTube動画の埋め込みの際に重くなるのを防いでくれる、軽くする方法を説明
(YouTube上のアドレスバーです)


はてなブログにYouTube動画の埋め込みの際に重くなるのを防いでくれる、軽くする方法を説明


置き換え完了です!

これで終わり! 完成です!


記事に反映される見た目



プレビューではしっかり反映されているでしょうか。
確認してみましょう!


「反映されているけどなんか崩れている……」
ステップ1が効いていない可能性があります。

「反映されていて崩れていない、けど動画が再生されない……」
ステップ2が効いていない可能性があります。

「反映されずコードがそのまま表示されてる……」
ステップ3が効いていない可能性があります。




普通に埋め込むのに比べて、この方法は多少手間がかかります。
ですがこのひと手間で、より読者にやさしい記事になりますね!




最後まで読んでくださってありがとうございます!

あなたにオススメの記事
【画像圧縮】はてなブログでPNG形式はNG!ファイルサイズが勝手に増加して重いページに…
脳汁ドバドバ気持ちいい!ガーデンスケイプなど中毒性のあるおもしろい無料パズルアプリおすすめ8選



© 2016 64姉弟