If you can dream it, you can do it.

元タイトル「北の大地のIT技術屋より」

はてなブログでYouTubeを埋め込むと重いので、画像に置き換える方法と作成したスクリプトを公開

 

メインブログで音楽を紹介することが多く、YouTubeを張ることが多々ある。

しかし、YouTubeは読み込みに時間がかかる上に処理に時間がかかり、ブログ自体が重くなる為、何とかする方法は半年くらい前に盛り上がってました。

shiromatakumi.hatenablog.com

blog.kaerucloud.com

 

こうやって回避策を示してくれることは非常に助かります。マジで感謝です。

しかし、この示していただいた回避策では自分の求めるものにはなっていなかったので、ネット上に転がっている情報を元にjavascriptCSSで回避策を書いてみたのでそのコードを公開します。

目的

※ソースだけ欲しい方は読み飛ばしてOK

 

自分の場合、既にYouTubeを埋め込んだ100本以上の記事があり、これを全て書き換えるのは結構な労力でして。要するにめんどくさいと思うわけです。

その一方で、見ていただく方への負担を減らしたいなと思っていたので、元ネタはあるし自分はWebアプリケーションを作るのが仕事(本来Java屋ですが、フロントも触る)なので、やればできるだろうと。

既に埋め込んでしまったYouTubeの動画を画像に置き換えてくれるスクリプトを書くことが目的となりました。

 

そこでもう少し調べてみると、自動で画像に切り替えてくれるスクリプトが公開されていました。

qiita.com

これをそのまま使えればよかったのですが、なかなかうまくいかず。試行錯誤し、やっと完成したので先日適応に至っています。

 

実際のコード

実際に設定したコードです。

javascript

ダッシュボード→デザイン→カスタマイズ→記事上下のカスタマイズ→「記事ページのプレビュー」を設定→「記事下」または「記事上」

<!-- youtube用 -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(function (){
    var movies = [];
    var images = [];
    var indexminus = 0;
    //全てのiframeタグに対して処理を実行する。
    $('iframe').each(function(index, element) {
        //iframeの中のsrc(埋め込みタグのURL)を取得。
        var movie_src = $(this).attr('src');
	if (movie_src != null && movie_src != undefined
            && ~movie_src.indexOf('youtube')) {
            //srcにyoutubeを含む場合の処理
            index += indexminus;
            //取得したURLはmovies配列に格納。
            movies[index] = movie_src;
            var movie_id = movie_src.substring(movie_src.lastIndexOf("/")).replace(/\?.*$/,"");
            //URLから動画idのみを取得して、文字連結をしてサムネイルを取得。
            images[index] = 'http://i.ytimg.com/vi' + movie_id + '/mqdefault.jpg';
            //iframeをサムネイル画像に置き換える。
            $(this).after('<div class="movieYoutube" data-video="http://www.youtube.com/embed/'+movie_id +'?autoplay=1"><img src="' + images[index] + '" class="" width="560"></img></div>').remove();
        } else {
	    indexminus--;
	}
    });

    $('.movieYoutube').each(function(index, element) {
        //サムネイルがクリックされた時の処理
        $(this).click(function (){
            //iframeに置き換え。
            $(this).after('<iframe src="' + movies[index] + '?autoplay=1" width="560" height="315"></iframe>').remove();
        });
    });
});
</script>

JQueryの読み込みが必要です。また、iframeのsrcにYouTubeのURLが含まれる場合にのみ実施するようにしている。これのお陰で他のiframe(ヘッドの画像やその他の画像)を排除してYouTubeのみにしている。

あとは、imgタグをdivタグでくくっていて、これが抜けていたせいで以前はCLICK TO PLAYという文字が出ずに結構悩んだ。::beforeはdivタグに効くのだと気づいてから、修正したら完成。

CSS

/* youtube用 */
.movieYoutube {
	display: inline-block;
	position: relative;
	overflow: hidden;
	width: 426px;
	height:240px;
}
.movieYoutube::before {
    content: 'CLICK TO PLAY';
	position: absolute;
	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;
}
.movieYoutube:hover::before {
	background: rgba(0, 0, 0, 0.7);
	cursor: pointer;
	transition: all 0.3s;
}

CSSで画像に加工した後のサイズやその他もろもろを変更している。

この辺はシロマティ (id:shiromatakumi) さんのものをほぼ流用させていただいています。

content: 'CLICK TO PLAY'の部分で画像に被る文字列を指定しているので、他の文字列にしてオリジナリティを出すのはアリだと思います。また、color: #FFFが文字の色を決めているので、カラーコードを参照してご自身のデザインに合った文字色にしてみてはいかがでしょうか。

HTML,CSS カラーコード一覧表 | 背景色や文字色の設定

YouTubeの画像自体は色が暗めに出るので、明るめの色を選択することをおススメします。

 

.movieYoutubeのwidthとheightで変換後の画像のサイズを決めているので、適切なサイズにしてみてください。width: 100%;にすると自動で画面幅にサイズを合わせてくれます。

ちなみに、YouTubeで推奨されるアスペクト比は16:9のようなので、下記リンクを参照してサイズを決める際の参考にしてみてはいかがでしょうか。

推奨される解像度とアスペクト比 - YouTube ヘルプ

上記コードはPC用で、スマホ用にはwidthを320px、heightを180pxで設定していますので、参考にしてみてください。

※カスタマイズは自己責任でお願いします。 また、プレビュー等でよく検証した上でご自身のブログに反映してください。

 

最後に

プログラマーの三大美徳のうちの一つ、「怠慢」が働いた結果、今まで埋め込んだものをそのまま生かそうとする手法を提示できました。正直、自分の守備範囲の中ではかなり端っこの部分の技術なので、もっと効率の良いコードはあるかもしれませんが、目的は達成できたのでこれまでとしたいと思います。