VideoBoxでyoutubeの埋め込みをポップアップ表示させる方法
2024/04/25
youtubeの埋め込みリンクをLightboxみたいにポップアップ表示させる方法が知りたかった。調べてみるとVideoBoxというプラグインが簡単そうだったのでメモ。
VideoBox(ダウンロード先)
http://sourceforge.net/projects/videobox-lb/files/videobox/videobox%201.1/
ソース
<html> <head> <title>videoboxのテスト</title> <script type="text/javascript" src="./video/js/mootools.js"></script> <script type="text/javascript" src="./video/js/swfobject.js"></script> <script type="text/javascript" src="./video/js/videobox.js"></script> <link rel="stylesheet" href="./video/css/videobox.css" type="text/css"> </head> <body> <h1>videoboxのテスト</h1> <div style="height:100%;"> <a href="http://www.youtube.com/watch?v=Er9JOhUZ2Ek" rel="vidbox 600 450" title="youtube"> クリックでポップアップ </a> </div> </body> </html>
その他
relのところでheightとweightを決められるみたい。あとdivにheight:100%をつけないとサンプルみたいにコンテンツが少ない場合は、全画面が暗転しなかった。
関連記事
-
-
Video.jsでテーマを指定して動画プレイヤーのデザインを変更する方法
Video.jsで動画プレイヤーのデザインを変更したい。調べたところWordPr ...
-
-
JavaScriptの動画プレイヤー用ライブラリ「Plyr」の利用方法
先日JavaScriptの動画プレイヤー用ライブラリ「Video.js」を試した ...
-
-
videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法
Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...
-
-
YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法
以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...
-
-
Video.jsで表示させた動画プレイヤーにロゴ画像(透かし)を追加する方法(videojs-logo)
Video.jsで表示させた動画プレイヤーの右上等、指定の位置にロゴ画像(透かし ...