PrettyEmbed_jsのデモページ

【jQuery】埋め込みYouTube動画の邪魔なヘッダーフッターを排除するプラグイン PrettyEmbed.js

2014.09.17   1366


YouTubeの埋め込みコードをそのまま使用するとYouTubeのPlayControlやヘッダーなどが表示されてサイトデザイン的にちょっと…ということがありますよね。
YouTube関連は色々なプラグインがありますが、今回はシンプルにYouTube動画の埋め込み時に邪魔なヘッダーやフッターを排除してサムネイルのみを表示するPrettyEmbed.jsを紹介します。


 

PrettyEmbed.jsのデモ


 

PrettyEmbed.jsプラグイン

 

PrettyEmbed.jsの使い方

それではPrettyEmbed.jsプラグインの使い方を見ていきましょう。
それぞれのコードを載せますね。

HTMLコード

JavaScriptコード

 

チェックポイント

このままのコードだと画面いっぱいにサムネイルが表示されてしまいますので、wrapperのdivなどを設けてお好みでCSSでサイズ調整してください。
あと、これはまだ原因が分からないのですが、YouTubeの動画によってはサムネイルが表示されない、、、ということがありますのでご注意下さい。

 

プラグインへ一言

これでYouTubeのサムネイルが目立つし、サイトデザインも汚さないね!

 

Feedlyで最新プラグインをチェック

follow us in feedly

良ければフォローもお待ちしております