HikakinTV記事軽量化

記事重すぎる

YouTubeの埋め込みって結構重いからいくつも入れてると激重になってしまうんですよね。

ってことで軽量化をします。

軽量化の手順

ちょうどやりたいことをまとめてあるサイトがあったので真似します。http://gamestart.hateblo.jp/entry/20171012/1507807912

CSSの設定

 .youtube {
   display: inline-block;
   position: relative;
   overflow: hidden;
   width: 480px;
   height: 270px;
 }

 .youtube::before {
   position: absolute;
   content: "▶";
   color: #fff;
   text-align: center;
   font-size: 22px;
   font-weight: bold;
   line-height: 270px;
   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 に上記CSSを設定。

コピー元では320×180でしたが小さいので480*270に変更。

また、「Click to Play」だと野暮ったいので▶に変更。サムネにかぶさると再生ボタンに見えます。

既存記事の編集

普段使っているエディタがMeryなのでこれを使って一気に置換します。

• \[https://www\.youtube\.com/watch\?v=(.+):embed:cite\]　を <div class="youtube" data-video="http://www.youtube.com/embed/\1?autoplay=1"><img src="http://img.youtube.com/vi/\1/mqdefault.jpg" alt="" width="480" height="270"/></div> に置換
• 末尾に変換スクリプトを追加

します。

document.selection.Replace("\\[https://www\\.youtube\\.com/watch\\?v=(.+):embed:cite\\]", "<div class=\"youtube\" data-video=\"http://www.youtube.com/embed/\\1?autoplay=1\"><img src=\"http://img.youtube.com/vi/\\1/mqdefault.jpg\" alt=\"\" width=\"480\"/></div>", meFindNext | meFindReplaceCase | meFindAround | meFindReplaceRegExp | meReplaceAll);
document.selection.EndOfDocument(false);
document.selection.Text = "\n\n<script>\n" 
+ "document.addEventListener('DOMContentLoaded', function(){"
+ "$('.youtube').click(function(){\n"
+ "  var video = '<iframe src=\"'+ $(this).attr('data-video') +'\" frameborder=\"0\" width=\"480\" height=\"270\"></iframe>';\n"
+ "  $(this).replaceWith(video);\n"
+ "});\n"
+ "});\n"
+ "</script>";

以上で完了です。