Youtubeのヘッダー・フッターを消す「PrettyEmbed.js」

 

以前にYoutubeの埋め込み動画をレスポンシブに対応させる方法を紹介しましたが、Youtubeのヘッダー・フッターを非表示にさせることができるjQueryプラグインがあったのでメモ。


PrettyEmbed.js

Githubに公開されてますのでファイル一式をダウンロードしてください。

使い方はjqueryとダウンロードした「jquery.prettyembed.min.js」を読み込ませます。

Java File
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="jquery.prettyembed.min.js"></script>

コピペした埋め込みタグ(iframe)をdivで囲みます。囲んだdivのidをVideoとします。

html
<div id="Video">
<iframe width="853" height="480" src="https://www.youtube.com/embed/DVwHCGAr_OE" frameborder="0" allowfullscreen></iframe>
</div>

あとは以下のようにVideoを適用させて見た目もスッキリ完成です。

Java
$(function(){
    $('#Video').prettyEmbed({
        videoID: 'DVwHCGAr_OE' //YoutubeのID (URLの末尾)
    });
});

適用前

適用後



  • 【jQuery】要素を3D回転させるプラグインTURNBOX.js
  • 【jQuery】プレースホルダにアニメーションを実装できる「FoxHolder」
  • 【jQuery】スクロールで画像に3D効果を掛けられる「tiltedpage_scroll.js」
  • 【jQuery】要素をふわふわ動かすプラグイン「jqFloat.js」
  • 【jQuery】リアルな波紋を再現するプラグイン「jQuery Ripple」
RELATED POSTS
  • SVGで背景パターンを作成できる「Hero Patterns」
  • 手書き風SVGアニメーションを簡単に実装できる「vivus.js」
  • 【html】文字実体参照を一覧できる「html arrows」
  • レスポンシブ対応の画像を生成してくれる「Responsive Image Breakpoints Generator」
  • CSSでよく使うレイアウト・パターンをまとめたサイト「CSS Layout」
  • CSSで出力する三角形ジェネレーター「CSS Triangle Generator」
RECENT POSTS
  • 無料で使えるフリーアイコン素材サイト15選
  • 配色を決める時に役立つカラーパレット22選
  • 無料で使えるハロウィンデザイン・イラスト素材サイト
  • ロゴデザインの参考になるロゴギャラリーサイト16選
PICKUP
  • 導入しておきたいWordPressのおすすめプラグイン
  • Photoshopで画像を切り抜くテクニック【初心者向け】
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • 【無料】おすすめのフリー画像・写真素材サイト10選【商用利用可】