さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【jQuery】YouTubeなどの動画をPOPUPで再生させる「Video box」

Pocket
LINEで送る

Youtube、Google Video等の動画をページ内からPOPUPリンクで再生させるjQueryです。

【使用方法】

  • Videoboxの3つのJSファイルを内へ読み込みます。 ※JSのファイルパスは設置場所により適宜変更してください。
<script src="js/mootools.js"></script>
<script src="js/swfobject.js"></script>
<script src="js/videobox.js"></script>
  • VideoboxのCSSファイルを内へ読み込みます。※CSSのファイルパスは設置場所により適宜変更してください。
  • 動画再生させるリンクを以下のように書きます。
    ※リンクはテキストでも画像でも可。
<a title="キャプション" href="動画のURL" rel="vidbox">動画再生</a>

動画のURL:再生させる動画のURL
キャプション:表示される動画の左下に表示されます

※再生される動画のサイズを変更したい場合は、relパラメータに大きさ(width height)を指定します。

<a title="キャプション" href="動画のURL" rel="vidbox 600 450">動画再生</a>

【参考サイト】
https://urbanqee.com/webutil/movies/youtube/youtube-videobox.html

カテゴリー:HP制作, JQuery

コメントを残す

コメント内容