YouTubeの動画埋め込み表示機能は便利で使っている人も多いかと思います。しかし、あの埋め込み表示は動作が重たく、あまり大量に埋め込むとWebブラウザの負荷が高くなります。 そこで使いたいのがlite-youtubeです。標準のツールに比べて圧倒的に軽快に動作します。

lite-youtubeの使い方

lite-youtubeで動作を表示した例。

デフォルトのiframeの場合。

lite-youtubeを使う場合のタグです。

<!-- 簡易版 -->
<lite -youtube data-videoid="ogfYd705cRs"></lite>
 
<!-- 詳細版 -->
<lite -youtube data-videoid="ogfYd705cRs" style="background-image: url('https://i.ytimg.com/vi/ogfYd705cRs/hqdefault.jpg');">
	<div class="lty-playbtn"></div>
</lite>

デフォルトのiframe版を見ると分かりますが、動画の上下に情報を追加表示しています。これらを表示する分、lite-youtubeに比べると重たいようです。lite-youtubeは瞬時に表示されるので、動画を見たいという目的だけであれば利用をお勧めします。

lite-youtubeはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。

lite-youtube-embed paulirish/lite-youtube-embed: A faster youtube embed.