jQuery

【jQuery】任意のYouTube動画をライトボックス表示するYoutube Url To FullScreen Video Lightbox

July 17, 2018
YU2FLV

Youtube Url To FullScreen Video Lightboxは任意のYouTube動画をライトボックス表示することができるプラグイン。レスポンシブ、軽量、任意のyoutubeのURLをサポートしています。

Installation

headにjquery.yu2fvl.cssを追加

<link href="dist/jquery.yu2fvl.css" rel="stylesheet" type="text/css">

jQuery.yu2fvl.jsを追加

<script src="/dist/jquery.yu2fvl.js"></script>

Usage

プラグインを適用

    <a class="play-1" href="https://www.youtube.com/watch?v=AbTUw7aTITg">Play my video</a>

    <script>
      $(".play-1").yu2fvl({ratio: 21/9});
    </script>

Options

minPaddingX: 50, // the space you want on *top and bottom when centering the video (value is divided by 2)

minPaddingY: 50, // the space you want on *left and right when centering the video (value is divided by 2)

ratio: 16/9, // choose the ration you want for your video

cssClass: "yu2fvl", // set a namespace / global css class

overlayCssClass: "-overlay", // give a suffix css class for the overlay

iframeCssClass: "-iframe", // give a suffix css class for the iframe

closeCssClass: "-close", // give a suffix css class for the close button

closeText: "X", // give some text for the close button

vid: false // set directly a youtube video id (though using an anchor is cool for SEO !)

t: 0 // sets time start of the video in seconds (60 = 1 minute)

open: false // Open the lightbox immediately from JavaScript. Requires vid to be set to work properly.

MIT