YouTubu動画の埋め込みを軽くする
YouTubuお気に入り動画を何本も自分のブログに埋め込みたいけど確実に重くなってしまいますよね
すぐに観たいものをリストにして、URLだけ貼り付けておくって手もあるけど芸が無いような
だからって、いちいちサムネイル画像を作ってそれに貼り付けるっていうのもなんかたいへん
そんな時におすすめなフリーで使える２つのWEBサイトを見つけました
お目当ての動画のURLをコピペするだけで、サムネイル画像の埋め込みタグを自動生成
さらに、サムネイル画像のサイズが選べるというすぐれものです
さらにさらに、複数本の動画のサムネイル画像をを同時生成が可能
さらに ようつべタグぽん ver.2.0 ではタイトルも記入出来ちゃいます
本来NO TITLE さんのYouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かったとういう記事を参考に実装してみたのですが、思わぬサプライズ！！
記事中にコードを加えたことで、ようつべタグぽんで生成されたサムネイル画像のタグを貼るだけでYouYubeを埋め込むことができたんです
それが、こちら ↓ ↓
i phone でもバッチリ！一石二鳥とはこのこと？((○(*≧∀≦)○))
複数のYouTube埋め込み、果たして軽くなったのかどうかはDADDYとJUNIOR＆シーザーで
MEMO：詳細はNOTITLEさんの記事をごらんくださいませ
まずは、NOTITLEさんの記事中cssをカスタマイズする方法には不安があったので、コードを記事中（ソース編集）に加える方法で実装しました
コードを埋め込むのは、記事中のどこでもいいようです
ただし、何故かは不明ですが、一番先頭に入れると、アイキャッチの横にコードが見えてしまいました
なので、YouTubeを埋め込む場所の前に以下のコードを記入
<style>
.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;
}
</style>
埋め込みたい場所に、ようつべタグぽんで生成されたコードを記入
記事の一番下に以下のコードを記入
<script src="http://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>
ここでふたつの問題発生です
今回記事中にjavaScript（ajax/jQuery/jquery-1.12.3.min.js）を使用したことで、既に実装しているjquery.colorboxが機能しなくなってしまいました
モーダルウィンドウ（ポップアップ表示）が開かなくなってしまい画像をクリックすると同ウインドウで画像のURLに行ってしまいます
記事の下段に入れたjQueryを読み込むコードの以下の部分が原因でした
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>
を削除して解決しました。 ＼＼( ⌒▽⌒ )／／ バンザーイ
?複数のYouTube動画を載せても、本当に軽くなるのか？のテストを兼ねた記事で、ようつべタグぽんで生成されない動画がありました。
NOTITLEさんのコードを使ってもダメで、試行錯誤の結果、動画IDを変えてみたら解決出来ました。
↓ ↓
<div class="youtube" data-video="http://www.youtube.com/embed/動画ID?autoplay=1″><img src="http://img.youtube.com/vi/動画ID/mqdefault.jpg" alt="" width="320″ height="180″ /></div>
動画IDというのは、貼り付けたいYouTube動画のURLのwatch?v=の後にある文字列です。
https://www.youtube.com/watch?v=ru0K8uYEZWw
こういうURLだったら、動画IDは「ru0K8uYEZWw」ですね
とありますが今回ダメだった動画URLが https://www.youtube.com/watch?v=ixZY53z4i1Y&t=13s
ixZY53z4i1Y&t と ixZY53z4i1Y&t=13s 両方で試しましたがダメ
