読者です 読者をやめる 読者になる 読者になる

frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

YouTubeを埋め込んでも重くならないようにする方法のyoutubeソース置換ツール

スポンサードリンク

youtube動画URL

例:https://www.youtube.com/watch?v=0E00Zuayv9Q






出力結果

ブログにyoutubeを貼ることが割と多いのですが、何個も設置した場合気になるのが読み込み速度ですよね。
自分は下記の記事を参考に、クリックしたらhtmlを置換して動画を読み込むようにしています。

shiromatakumi.hatenablog.com

とても便利なのですが、

https://www.youtube.com/watch?v=動画ID

<div class="youtube" data-video="http://www.youtube.com/embed/動画ID?autoplay=1"><img src="http://img.youtube.com/vi/動画ID/mqdefault.jpg" alt="" width="320" height="180" /></div>

としなくてはいけないのでそこがちょっと面倒に感じていました。

今までの作業手順
  • 1.貼りたい動画のIDを調べる
  • 2.divで始まる上記のコードをコピペする(どこかに保存、もしくは過去の記事から探してコピーする必要あり)
  • 3.1の動画IDを2のコードに2か所コピペする
ツールを使った場合
  • 1.貼りたい動画のurlをツールのテキストフォームにコピー
  • 2.置換ボタンを押す
  • 3.出力されたソースをブログにコピペする

手順の数は一緒ですが、今までの作業手順の2、3がなくなるだけでも大分時間短縮になるのではと思います。
また、1~5個まで一気に変換するので、複数埋め込みたい場合より効果を発揮します。

詳しいYouTubeを埋め込んでも重くならないようにする方法は上記ブログをチェックしてみてください!