前回、Strobe Media Playbackのサンプルについている、setupを利用して、埋め込みコードを取得しましたが、objectタグを利用した方法でした。
YouTubeの埋め込みコードは、iframeをデフォルトにしているので、長いものに巻かれる感じで、今回は、iframeのケースを試してみようと思います。
やり方は、まず前回同様、Strobe Media Playbackをダウンロードして、「for Flash Player 10.1」を「StrobeMediaPlayback」にリネーム。そのままFTPでアップロードします。StrobeMediaPlaybackフォルダの1つ上に、動画を表示するHTMLファイルを置くようにします。
サンプルとして、埋め込みコードは、このような感じになります。
<iframe width="640" height="360" src="StrobeMediaPlayback/embed.html?src=https://bizvalley.co.jp/asset/01/bizvalley_pv.flv" class="strobemediaplayback-video-player" frameborder="0" allowfullscreen"></iframe>
ポイントは、embed.htmlにアクセスして、?src= で動画ファイルを指定している所です。動画形式は、flv、mp4どちらでもいけます。
src="StrobeMediaPlayback/embed.html?src=<動画ファイルURL>"
ブログに埋め込むと、このような感じになります。下の埋め込みは、相対パスでは繋がらないので、embed.htmlを絶対パスで指定しています。
Strobe Media Playbackでiframeを利用した埋め込み
サンプルデモ
いろいろなやり方があるので、必要なケースに応じて使い分けてみるといいでしょう。