はてなブログの構築005 （YouTube軽量化）
YouTube軽量化
音楽の紹介で、YouTube動画をブログに貼付（埋込）させて戴いていますが、
記事内で動画再生が可能な上、サムネイル表示が行われるので、ブログと
しての見映えが良くなるのですが、いくつもの動画を紹介（貼付）すると
ページがかなり重くなってしまいますよね…
せっかく、皆さまへご紹介したいのに、これでは見てもらうことができません
何か良い方法はないかと「はてなブログ YouTube」で検索をかけたら
にたどりつきました
こちらのご紹介、とても丁寧でわかりやすいので、皆さんもお困りでしたら
ぜひ、ご活用下さい！
（先達の皆さま、本当に感謝致します）
①「デザイン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;
}
を使用させて戴く
コード内の”Click to Play”を、任意のテキスト（私は”クリックで再生”にしましたが）へ
書き換えることができるようで
コードの貼付方法は、
に記してあります
⓶「記事」へコードを記入
記事を「HTML編集」にし、最下段へ下記コードを記入
<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>
③「動画コード」を記事内へ貼付
動画を貼る箇所へ、下記コードを記入
<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>
「●●●●」には、貼りたい動画の「動画ID」を書き込みます
動画IDは、
「v=」以降の赤枠部分になります
こちらのコードと動画IDを記事内へ書き込むと
※青枠は「YouTube」貼付 ボタンを用いて挿入した動画
赤枠は「コード」を記入、動画IDを書き加えた動画
見事、軽量化に成功しました！
普通の貼付に比べて、手間がかかりますが、行う甲斐のある作業ですね！
※私の備忘録のため、あえて記させて戴きました
