No Name

元「NO TITLE」

YouTubeを埋め込んでも重くならないようにする軽量化する方法【新バージョン】

ブログ運営 カスタマイズ

この記事をシェアする

以前紹介したYouTubeを埋め込んでも重くならないようにする方法の新しいバージョンです。

記事後半にははてなブログで使う方法も紹介しています。

YouTubeを埋め込んでも重くならないようにする方法

Maroon 5 - Girls Like You ft. Cardi B

動画が埋め込まれているように見えますが、画像が表示されている状態です。

この画像がクリックされることで動画が埋め込まれます。

<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

動画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>

レスポンシブにしていない人は、「デザイン」→「スマートフォン」→「フッタ」にも同じコードを追加してください。]

以上です。



© 2019- No Name