【目指せブログ軽量化】Youtubeの軽量表示とGIFの作り方について
どうも。
すなまめ(＠sunamame06)です。
前回の記事で今まで導入していなかった初の試みをしてみたのでこの記事でご紹介していきます。
Youtubeの埋め込みを軽量化する方法
普通にYoutubeの動画を埋め込むと
うん。いつも通りです。
動画埋め込むといいですね(*'▽')
ですが普通に埋め込むと表示が重たくなってしまうので
なんとかしようと思って手を入れてみました。
参考記事
はてなブログにYouTube動画を埋め込むと重くなる！ので軽くする方法を紹介 - いつまで仕事してるの！ゲームしなさい！
簡単3ステップでした。
①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;
}
コピペ画像☟
②記事編集画面でHTML貼り付け
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>
HTMLに貼り付けた画像☟
③動画コードをHTML編集に貼り付け
YoutubeのIDをコピペして貼り付けるコード
<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>
貼りたいところに上記の
コードをコピペします。
YoutubeのIDをコピー
コピーしたIDを書き替え
完成がこちら☟
クリックすると動画を読み込む形なので重くならないです。
Youtubeの動画をGIFにする方法
ここで簡単に作れます。
作りたい動画を貼り付けて「作成する」ボタンをクリック。
出来上がり(*'▽')
これでみんなGIFが掲載できますね('ω')！！
まとめ
今回はYoutubeの軽量化とGIFの作り方についての記事でした。
みなさんのブログやサイトの参考になったでしょうか(*'▽')
より良い運営をしていきましょう！
・・・・・
それでは、この辺で失礼します。
これからも好きなものや商品の紹介をしていきますので、
よろしくお願いいたします。
では、また～！！
※ブックマークとか読者登録とかフォロワー登録してくれると喜びます 。
ブログ関連記事
はてなブログのデザイン、イチから模様替えしました。【デザインテーマ】
