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%をつけないとサンプルみたいにコンテンツが少ない場合は、全画面が暗転しなかった。
関連記事
-
-
ブラウザから動画ファイル名を確認できないようにPHPで動画を出力する方法
Webページ上で動画ファイルを再生したい場合、通常だとブラウザのソースコード上に ...
-
-
Video.jsで再生速度及び音量の設定状況をブラウザに保存させる方法(videojs-persist)
Video.jsで再生速度及び音量を変更してもページ更新・遷移すると設定状況がリ ...
-
-
WordPressにて記事内で動画(mp4)ファイルの再生する方法
WordPressでyoutube等の動画サイトの埋め込みタグではなく、mp4フ ...
-
-
Video.jsでYoutube動画を取り扱う方法
Video.jsでYoutube動画を取り扱いたい。具体的にはVideo.jsの ...
-
-
Video.jsの動画プレイヤーにVTTファイルで字幕機能を実装する方法
Video.jsの動画プレイヤーに字幕機能を実装したい。調べたところVTT(Vi ...