以前紹介したYouTubeを埋め込んでも重くならないようにする方法の新しいバージョンです。
記事後半にははてなブログで使う方法も紹介しています。
YouTubeを埋め込んでも重くならないようにする方法

動画が埋め込まれているように見えますが、画像が表示されている状態です。
この画像がクリックされることで動画が埋め込まれます。
<div class="youtube-wrap"> <div class="youtube" data-video="https://www.youtube.com/embed/動画ID?autoplay=1"> <img src="https://img.youtube.com/vi/動画ID/hqdefault.jpg" alt="動画のタイトルなど"> </div> </div>
HTMLはこんな感じです。
動画IDというのはURLの「V=」の後の文字列です(画像)。
お次はCSS。
.youtube-wrap { padding: 30px 0; text-align: center; background-color: #000; margin-bottom: 6px; } .youtube { vertical-align: bottom; margin-bottom: 0; display: inline-block; position: relative; width: 480px; height: 270px; overflow: hidden; } .youtube:before, .youtube:after { position: absolute; content: ""; top: 50%; left: 50%; } .youtube:before { width: 64px; height: 44px; background-color: #cc181e; margin: -22px 0 0 -32px; border-radius: 12px; z-index: 2; opacity: .9; transition: all .3s; } .youtube:after { margin: -10px 0 0 -8px; border: solid 10px transparent; border-right: solid 18px transparent; border-left: solid 18px #fff; z-index: 3; } .youtube img { position: relative; top: 50%; left: 50%; width: auto; height: auto; vertical-align: bottom; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); cursor: pointer; } @media screen and (max-width: 560px){ .youtube-wrap { padding: 0; background-color: transparent; } .youtube:before { border-radius: 10px; width: 50px; height: 36px; margin-left: -28px; margin-top: -18px; } .youtube:after { margin-top: -8px; margin-left: -10px; border-top: solid 8px transparent; border-bottom: solid 8px transparent; border-right: solid 16px transparent; border-left: solid 16px #fff; } } @media screen and (max-width: 488px){ .youtube { width: 100%; max-width: 480px; height: 56.25%; } .youtube img { left: 0; width: 100%; height: 100%; -webkit-transform: translate(0,0); -ms-transform: translate(0,0); transform: translate(0,0); } }
ちょっと複雑ですが、YouTubeの再生ボタンのように装飾しています。
以下はJavaScript。
function embedYouTube(){ var youtube = document.getElementsByClassName('youtube'); for(var i=0;i<youtube.length;i++){ youtube[i].addEventListener('click',function(){ video = '<iframe src="'+ this.getAttribute('data-video') +'" frameborder="0" width="480" height="270"></iframe>'; this.outerHTML = video; }); } } embedYouTube();
画像をクリックするとiframeが埋め込まれるように処理をしています。
はてなブログで使うには
はてなブログでYouTube動画の埋め込みを使う時は、記事内に以下の動画IDとalt属性を書き換えて挿入してください。
<div class="youtube-wrap"><div class="youtube" data-video="https://www.youtube.com/embed/動画ID?autoplay=1"><img src="https://img.youtube.com/vi/動画ID/hqdefault.jpg" alt="動画のタイトルなど"></div></div>
以下のCSSを「デザイン」→「カスタマイズ」→「デザインCSS」に追加してください。
.youtube-wrap { padding: 30px 0; text-align: center; background-color: #000; margin-bottom: 6px; } .youtube { vertical-align: bottom; margin-bottom: 0; display: inline-block; position: relative; width: 480px; height: 270px; overflow: hidden; } .youtube:before, .youtube:after { position: absolute; content: ""; top: 50%; left: 50%; } .youtube:before { width: 64px; height: 44px; background-color: #cc181e; margin: -22px 0 0 -32px; border-radius: 12px; z-index: 2; opacity: .9; transition: all .3s; } .youtube:after { margin: -10px 0 0 -8px; border: solid 10px transparent; border-right: solid 18px transparent; border-left: solid 18px #fff; z-index: 3; } .youtube img { position: relative; top: 50%; left: 50%; width: auto; height: auto; vertical-align: bottom; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); cursor: pointer; }
レスポンシブにしていない人は、スマホにも対応されるために「デザイン」→「スマートフォン」→「ヘッダ」に以下を追加してください。
<style> .youtube-wrap { padding: 30px 0; text-align: center; background-color: #000; margin-bottom: 6px; } .youtube { vertical-align: bottom; margin-bottom: 0; display: inline-block; position: relative; width: 480px; height: 270px; overflow: hidden; } .youtube:before, .youtube:after { position: absolute; content: ""; top: 50%; left: 50%; } .youtube:before { width: 64px; height: 44px; background-color: #cc181e; margin: -22px 0 0 -32px; border-radius: 12px; z-index: 2; opacity: .9; transition: all .3s; } .youtube:after { margin: -10px 0 0 -8px; border: solid 10px transparent; border-right: solid 18px transparent; border-left: solid 18px #fff; z-index: 3; } .youtube img { position: relative; top: 50%; left: 50%; width: auto; height: auto; vertical-align: bottom; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); cursor: pointer; } @media screen and (max-width: 560px){ .youtube-wrap { padding: 0; background-color: transparent; } .youtube:before { border-radius: 10px; width: 50px; height: 36px; margin-left: -28px; margin-top: -18px; } .youtube:after { margin-top: -8px; margin-left: -10px; border-top: solid 8px transparent; border-bottom: solid 8px transparent; border-right: solid 16px transparent; border-left: solid 16px #fff; } } @media screen and (max-width: 488px){ .youtube { width: 100%; max-width: 480px; height: 56.25%; } .youtube img { left: 0; width: 100%; height: 100%; -webkit-transform: translate(0,0); -ms-transform: translate(0,0); transform: translate(0,0); } } </style>
これをコピペしてください。
そして、以下を「デザイン」→「カスタマイズ」→「フッタ」にコピペしてください。
<script> function embedYouTube(){ var youtube = document.getElementsByClassName('youtube'); for(var i=0;i<youtube.length;i++){ youtube[i].addEventListener('click',function(){ video = '<iframe src="'+ this.getAttribute('data-video') +'" frameborder="0" width="480" height="270"></iframe>'; this.outerHTML = video; }); } } embedYouTube(); </script>
レスポンシブにしていない人は、「デザイン」→「スマートフォン」→「フッタ」にも同じコードを追加してください。]
以上です。