勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ

VideoBoxでyoutubeの埋め込みをポップアップ表示させる方法

   2024/04/25  JavaScript

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%をつけないとサンプルみたいにコンテンツが少ない場合は、全画面が暗転しなかった。

 - JavaScript

  関連記事

ブラウザから動画ファイル名を確認できないようにPHPで動画を出力する方法
ブラウザから動画ファイル名を確認できないようにPHPで動画を出力する方法

Webページ上で動画ファイルを再生したい場合、通常だとブラウザのソースコード上に ...

Video.jsで再生速度及び音量の設定状況をブラウザに保存させる方法(videojs-persist)
Video.jsで再生速度及び音量の設定状況をブラウザに保存させる方法(videojs-persist)

Video.jsで再生速度及び音量を変更してもページ更新・遷移すると設定状況がリ ...

WordPressにて記事内で動画(mp4)ファイルの再生する方法
WordPressにて記事内で動画(mp4)ファイルの再生する方法

WordPressでyoutube等の動画サイトの埋め込みタグではなく、mp4フ ...

Video.jsでYoutube動画を取り扱う方法
Video.jsでYoutube動画を取り扱う方法

Video.jsでYoutube動画を取り扱いたい。具体的にはVideo.jsの ...

Video.jsの動画プレイヤーにVTTファイルで字幕機能を実装する方法
Video.jsの動画プレイヤーにVTTファイルで字幕機能を実装する方法

Video.jsの動画プレイヤーに字幕機能を実装したい。調べたところVTT(Vi ...