マゼコゼ紹介企画

マゼコゼ紹介企画

エンタメや商品、サービスなど様々なものを紹介するブログです。

【目指せブログ軽量化】Youtubeの軽量表示とGIFの作り方について


どうも。

すなまめ(@sunamame06)です。

 

 前回の記事で今まで導入していなかった初の試みをしてみたのでこの記事でご紹介していきます。

 

www.mazekoze-syoukai.net

  

Youtubeの埋め込みを軽量化する方法

普通にYoutubeの動画を埋め込むと

www.youtube.com

うん。いつも通りです。

 

動画埋め込むといいですね(*'▽')

 

ですが普通に埋め込むと表示が重たくなってしまうので

なんとかしようと思って手を入れてみました。

参考記事

はてなブログに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にする方法

gifmagazine.net

 

ここで簡単に作れます。

作りたい動画を貼り付けて「作成する」ボタンをクリック。

 

 

出来上がり(*'▽')

 

これでみんなGIFが掲載できますね('ω')!!

 

まとめ

今回はYoutubeの軽量化とGIFの作り方についての記事でした。

 

みなさんのブログやサイトの参考になったでしょうか(*'▽')

 

より良い運営をしていきましょう!

 

・・・・・

 

それでは、この辺で失礼します。

 

これからも好きなものや商品の紹介をしていきますので、

マゼコゼ紹介企画

よろしくお願いいたします。

 

では、また~!!

 

※ブックマークとか読者登録とかフォロワー登録してくれると喜びます 。

sunamamedia.com

ブログ関連記事

【はてなブロググループ】新しいこと、始めました。【SNS】

はてなブログのデザイン、イチから模様替えしました。【デザインテーマ】

【紹介記事】ブログを"10コ"紹介してみました【ブロガーさんと繋がりたい】

【ゆとりブロガー】ど素人がブログを2ヶ月やってみました。【毎日記事更新】

 にほんブログ村 にほんブログ村へ
にほんブログ村 


人気ブログランキング