良い感じにYouTubeのvideoを埋め込めるJS「PrettyEmbed.js」

そうよね、YouTubeのvideoを埋め込んだ時の外側の枠、いらないもんね。

良い感じにvideoを埋め込む

PrettyEmbed_js_Demo_-_CodePen

そういうわけで良い感じにYouTubeのvideoを埋め込めるJSがPrettyEmbed.jsです。

こんな感じでタグを設定しておいて、

JSでYouTubeのvideoを埋め込みます。YouTubeの埋め込みタグを利用するよりかは、多少めんどいです。videoIDはdata-videoidという属性を使って、タグ内で指定することもできます。

$('#my-video-display').prettyEmbed({
    videoID: 'aBcDeFg12345',
    previewSize: 'hd',              // use either this option...
    customPreviewImage: '',         // ...or this option

    // Embed controls
    showInfo: false,
    showControls: true,
    loop: false,

    colorScheme: 'dark',
    showRelated: false,

    useFitVids: true
)};

fitvids.jsを使って、画面幅に応じて自動的にvideoの大きさを調節してくれる機能もついています（useFitVidsがそのオプションです）。

再生前のイメージも簡単に設定しておけるのも、良いですね。

PrettyEmbed.js