WEB WING|Affinger5 WORDPRESS

【超オススメ|重くならないYOUTUBEの貼付方】映像を軽量化した画像にアイコンを重ねる!WORDPRESS編!

投稿日:

【重くならないYOUTUBEの貼り付け方】映像を軽量化した画像にアイコンを重ねる方法!WORDPRESS編!
YOUTUBEってただタグを貼り付ければ良いのかとおもってました!
重たくなる貼り付け方もあるよ!
えーーー!

 

こんな方におすすめ

  • ブログが重い。
  • 重くならない方法でYOUTUBEを記事内に貼り付ける方法
  • プラグインなしで対応したい。
  • WORDPRESS対応
  • さらにおしゃれにアイコン画像を重ねる
  • カスタマイズ出来るCSSなどのコードもご紹介

動画を貼り付けない方は飛ばしてください!

 

重くならずYOUTUBEを記事内に貼り付けるオススメの方法

動画はとても魅力的!

  • 説明するより一瞬で伝わる
  • でも重たくなるのも事実・・・
  • これから5Gになるから映像対応したい
ますます、ブログには動画を貼りたい・・・
しかもおしゃれに!

 

sudyweb

 

プラグインを使うべき?

これ以上プラグインを追加したくない!

プラグインは便利だけど入れれば入れるほどぶつかったり、問題もある!

だからプラグインなしで軽量化したい・・・

 

プラグインなしでやってみよう!

プラグインを使わずにCSSで貼り付ける方法

コピペでOK!

 

いつも通りのYOUTUBEの貼り付け方

youtubeの再生画面の右下にある「共有」からできますよー!

 

よく見る貼り付け方ですね!

画像も大きいし、強くアピールしたい記事内映像としては良さそうです!

 

軽量化した方法で貼り付けた映像

Click to PLAY!

 

画像をクリックすると映像が見られます!

いかがでしょうか?!

 

参考にさせて頂いたサイトは、はてなブログ用でした!

このサイトはWORD PRESSですが問題ありませんでした!

 

元サイトでは、文字のみ重ねていましたが、

YOUTUBEのアイコンを重ねて、

さらに映像を見てもらいやすいデザイン変更しました!

 

 

YOUTUBEを軽量化するために使ったコード

コピペすればOKです!

記事内コード

<div class="youtube" data-video="https://www.youtube.com/embed/URLオリジナル共有コード?autoplay=1"><img src="https://img.youtube.com/vi/URLオリジナル共有コード/mqdefault.jpg" alt="" width="320" height="180" />
<p><i class="fa fa-youtube"></i>Click to PLAY!</p>
</div>

「URLオリジナル共有コード」にはURLの末尾にあるオリジナルコードを差し替えて下さい!

https://www.youtube.com/watch?v=XVLbp7-kO44 アドレスだったら XVLbp7-kO44となります!

CSSコード

/*youtube軽くするCSS 開始*/
.youtube {
position: relative;
}

.youtube p {/*pタグを画像の真ん中に*/
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
margin:0;/*余計な隙間を除く*/
padding:0;/*余計な隙間を除く*/
color:#fff;/*文字色*/
text-align:center;/*pタグ内で更に中央寄せ*/
font-family: 'Quicksand',sans-serif;
z-index:9999;
}

.youtube p .fa {/*アイコンに対して*/
display:block;/*前後に改行*/
padding-top:14px;/*アイコン中央に*/
font-size: 6em;/*サイズ*/
color: rgba(255, 255, 255, 1);/*透明なし*/
}

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

.youtube::before {
position: absolute;
content: "";
background: rgba(0, 0, 0, 0.4);
top: 10%;
left: 10%;
width: 80%;
height: 80%;
z-index: 10;
transition: all 0.3s;
border:2px solid #fff;
}

.fa-youtube-play{color:red;}

.youtube:hover:before {
background: rgba(0, 0, 0, 0.5);
top: 5%;
left: 5%;
width: 90%;
height: 90%;
cursor: pointer;
transition: all 0.3s;
border:none;
}

/*youtube軽くするCSS ここまで!*/

 

テキストモードで記事の一番下に貼り付けてください!

Scriptコード

<p><script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script> <script>// <!<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>[CDATA[
$('.youtube').click(function(){
video = '<iframe src="'+ $(this).attr('data-video') +'" frameborder="0" width="480" height="270"></iframe>';
$(this).replaceWith(video);
});
// ]]<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_end"></span>></script></p>

 

参考にさせて頂いたサイトはこちらです!(はてなブログ用)

https://www.notitle-weblog.com/entry/2016/05/21/155650

 

まとめ

知らなかった事で招くたくさんの悲しみがありますね!

WEB製作には終わりがないな〜

 

これからのブログ運営に動画は必須よね
勉強だ!

Copyright© うふふ.TOKYO , 2019 All Rights Reserved.