はてなブログにYouTube動画を埋め込むと重くなる!ので軽くする方法を紹介
ゲーマー姉弟の64弟(@64_oto)です。
YouTube動画をはてなブログに貼るとき、『埋め込み』形式を選択することができますよね。
YouTubeに移動せずに記事内で動画が再生できるうえ、サムネイル画像が表示されるので見栄えもよくなるのが嬉しいですよね。
ですがこの埋め込み機能、ページが重くなるという弱点があります。
1つや2つの動画の埋め込みでしたらそこまで重くはなりませんが、たくさん埋め込んでしまうと、かなり重いページになってしまいます。
YouTube動画をたくさん紹介した記事をせっかく書いても、ページが重かったら見てもらえないですもんね……
「この動画とあわせて、この動画とこの動画も並べて貼りたい! でも重くなっちゃう……」
なんてときに軽いまま貼れる解決方法があるので、紹介します!
こんな感じの見た目で軽くなります
まず普通に埋め込みで貼った場合、この見た目になりますよね。
[https://www.youtube.com/watch?v=sMPDQ69KMKk:embed:cite]
見た目いいですよね〜。
画像として映えるので、ページを彩ってくれます。
しかしこの状態だと、ページを開いたときに動画のぶんまでイッキにがんばって読み込むことになるので、重くなっちゃいます。
このあと紹介する“軽くする方法”で埋め込むとこんな見た目になります
<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にコピペします。
長くて「なんじゃこりゃ?」となりますよね(笑)
.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;
}
このコードは、動画を貼ったときの見た目をキレイにする役割を持っています。
上から10行目『content: "Click to Play";』の部分の『" "』内を任意のテキストに書き換えることができますよ!
content: "タップで再生";
コードの貼り付けかたを画像付きでくわしく説明しました。
はてなブログの管理画面に慣れてなかったらこちらをどうぞ!
説明をひらく
管理画面を開き、左側のバーから『デザイン』を選択します。
次にスパナのマークの『カスタマイズ』タブを選択します。
一覧が表示されるので、その中の『デザインCSS』を選択します
するとコードを記述する欄が表示されます。
ここに先ほどの長めのコードを記述します。
記述する箇所はどこでもOKです。
わかりやすいように、いちばん下に追記するのが無難かもしれません。
これで記述完了です!
② 記事内にコードを記述
記事内のいちばん下に下記のコードを記述します。
(※実際のブログ記事にこんな文字列は表示されませんのでご安心を!)
<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>
このコードは、貼った動画に魔法をかけてくれるような役割です。
これがないと動画が動きません!
はてな記法、Markdown記法の場合
記事のいちばん下にコピペ! これでステップ2終わり!
見たままモードの場合
まず左上の『編集見たまま』タブから『HTML編集』タブに切り替えます。
『HTML編集』内のいちばん下にコードを貼りつけましょう。
コピペ完了! これでステップ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>
YouTube動画には、動画1つ1つに『動画ID』が備わっています。
このIDによって動画のURLが決まっているわけです。
貼りたい動画の『動画ID』を、上記コードの「●●●●」部分に入れると完成です。
画像付きで説明しますね!
はてな記法、Markdown記法の場合
動画を埋め込みたい箇所に先ほどのコードを貼り付けます。
貼り付けるとこんな感じ!
●●●●を、貼りたい動画のアドレスにある動画ID(赤字下線)に置き換えます。
(『v=』のあとが動画IDです)
置き換え完了しました!
これで終わり! 全ステップ完成です!
見たままモードの場合
例でこのあたりに貼ってみますね!
左上の『編集見たまま』から『HTML編集』に切り替えます。
動画を貼りたい部分に先ほどのコードを貼ります。
「どこに貼りゃいいんだ!?」と一瞬ビビりますが、前後の文章を目印にすれば貼る位置がわかります!
貼り付けるとこんな感じ!
●●●●を、貼りたい動画のアドレスにある動画ID(赤字下線)に置き換えます。
(YouTube上のアドレスバーです)
置き換え完了です!
これで終わり! 完成です!
プレビューではしっかり反映されているでしょうか。
確認してみましょう!
普通に埋め込むのに比べて、この方法は多少手間がかかります。
ですがこのひと手間で、より読者にやさしい記事になりますね!
最後まで読んでくださってありがとうございます!
- あなたにオススメの記事
- 【画像圧縮】はてなブログでPNG形式はNG!ファイルサイズが勝手に増加して重いページに…
- 脳汁ドバドバ気持ちいい!ガーデンスケイプなど中毒性のあるおもしろい無料パズルアプリおすすめ8選