FC2ブログでYouTube埋め込み動画の表示を軽くする［高速表示］
サイトの表示スピードはアクセス数に多大な影響があると言われています。取りあえず難しいことは置いておいて、早く表示され閲覧者が快適に見れたら言うことはない。
そこで今回はYouTubeの埋め込みをFC2ブログで高速表示する方法に挑戦。方法としてはサムネイル画像を表示することで高速化となる。
参考サイト様はこちら。
上記をサイト様を参考に、変更した箇所を踏まえて紹介していきます。毎度の事ですがHTMLは素人なので間違っている可能性大。この手のことが明るい方で、こうした方がいいというのがあればアドバイス下さい。
HTMLの記述
HTML内にこちらのスクリプトを挿入。動画を掲載しているのは個別記事のみなのでpermanent_areaを指定。
設置箇所は</head>か</body>の上に。
<!-- youtubeここから -->
<!--permanent_area-->
<script>
function youtube_defer() {
var videoDefer = document.getElementById('videoDefer');
if(videoDefer.getAttribute('data-src')) {
videoDefer.setAttribute('src',videoDefer.getAttribute('data-src'));
}
}
window.onload = youtube_defer;
</script>
<!--/permanent_area-->
<!-- youtubeここまで -->
CSSに記述
まずは参考サイト様のコードを、そのまま挿入すると左画像になります。
これを右画像のようにすべく、以下を変更しました。
・Youtube右端が画面右側に付く
・画像真ん中の文字の変更
Youtube右端が画面右側に付く
widthとheightを変更。
［Before］
width: 320px;
height: 180px;
［After］
max-width: 100%;
max-height: 100%;
これで先の画像でサイズが小さいYoutubeの埋め込みコードも、サイズに合わせて変更。
画像真ん中の文字の変更
画像をクリックしてくださいの文字、デフォルトでは「Click to Play」となっています。
こちらはサイトのデザインや、自分の好みで赤字箇所を自由に変更して下さい。
［Before］
content: "Click to Play";
［After］
content: "動画を見る ▷";
その他の例として。
・再生
・再生 ▷
・クリック ▷
・動画を再生
・動画を再生 ▷
・動画を見る ▷
*前項の設定変更により、動画サイズによっては文字表示位置が真ん中よりズレます(CSSに記述の項目画像参照)。line-height: 180px;を変更する必要あり、後日追記かも。
シャドウの明るさ調整
こちらも好みの問題で、サムネイル画像にかかってているシャドウを少し明るくします。
［Before］
background: rgba(0, 0, 0, 0.6)
［After］
background: rgba(0, 0, 0, 0.4)
一番右の数字が低いほど影が薄くなります。明るくするほど、文字が見辛くなるのでその場合は文字の色の調整も。
CSS変更まとめ
変更したCSSに記述するコード。
/***------------------------------------------
youtube
------------------------------------------***/
.youtube {
display: inline-block;
position: relative;
overflow: hidden;
max-width: 100%;
max-height: 100%;
}
.youtube::before {
position: absolute;
content: "動画を見る ▷";
color: #fff;
text-align: center;
font-size: 22px;
font-weight: bold;
line-height: 180px;
background: rgba(0, 0, 0, 0.4);
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;
}
記事中の動画コード
前項までで下準備は終了。あとは記事中に動画を埋め込むだけ。
コードも通常の埋め込みコードではなく、変更が必要なのですが、こちらのようつべタグぽんというサイトを利用で簡単に変換コードが利用できます。
利用はサムネイルのサイズを選択→動画URLを入力→タグを生成する→コードコピーで記事中に貼り付けるだけ。
サイズは何種類か選べますが、先述の通り文字位置が調整できてませんので320×180が無難。
ようつべタグぽんは動画タイトルも表示できるver.2.0があるのだが、理由は不明だが表示がうまくいかない。利用するなら通常バージョンをどうぞ。
SSL用にsを付ける
ブログをSSL化している方向け。
ようつべタグぽんで作成されたタグを見て下さい。img srcの部分のhttpにsが付いていない。
<div class="youtube" data-video="https://www.youtube.com/embed/uO5kHrqvWd8?autoplay=1"><img src="http://img.youtube.com/vi/○○○○/mqdefault.jpg" alt="" width="320" height="180" /></div>
これが反応して「このサイトへの接続は完全に保護されていません」になってしまいます。
解消のため手動でhttp→httpsに変更して下さい。
現在SSL化に対応させていないサイトでも、今後SSLに対応させた時に変更の必要が出てくるので、掲載の際はhttpsに変えておいたほうがいいと思う。
YouTube高速化の効果
取りあえず形は出来た。実際確認してみてください。
では肝心な所で早くなったのかを検証。1つだけの埋め込みならあまり変わらないような気がするので、当ブログで3個の動画が埋め込まれているある記事をGTmetrixで数字がどう変化したかを見てみます。
［変更前］
［変更後］
動画3つ掲載の記事で上記の効果が見られました。
体感では早くなった気がしていたが、Fully Loaded Timeで6秒も違うと実際に効果があった。
一応元々の数字もこの記事はひどく悪いが、アンケートも入れている記事なのでなお悪し。この辺が冒頭の話と繋がりもどかしい部分ではあります。
デメリット
YouTube高速化の気になった所が3点。
最近記事内は極力シンプルに作ったほうがいいのではという考え方になっています。
これはSSL化やITP2.0で、過去記事をチェックせざるを得ない状況になったからで。ITP2.0の影響では某ASPの某広告は差し替えての案内が来てます。SSL化も記事数が多くて未だに全ての記事のチェックが出来ていない。
今回のことはチェックする記事は少ないのでまだ楽だが、今後何か変更する際にまた時間をとられる可能性がある。
もう一つ、パソコンから見た場合に、全画面表示が出来ない。
タイトルクリックで直接YouTubeに飛べるので、そこまで必要性は無いと思う部分ではある。一応対応できるなら後日変更します。
最後は再生(開始)位置の指定ができない。公式の埋め込みなら何秒から再生させると指定が可能で、長い動画の場合に記事内の話題にピンポイントで再生箇所を合わせることができていたのが、今回の方法を採用すると出来ない。
上2つに関しては可能なようでしたら修正します。
まとめ
数字を見るに効果は間違いなくあるので、過去記事や新記事でも導入していきたいと思う。
YouTubeを埋め込みすぎて、重たくなているFC2ブログユーザーはお試し下さい。
余談ですが、一時期はよく見かけた今回の手法だが、最近はあまり見かけないような気がするのだが気のせいか。
スポンサードリンク