ブログ記事内の複数動画をタブ化して表示してみる

これまでブログに記事を投稿した時にそれに関する動画を掲載することがありましたが、複数の動画サイトやSNSに動画を投稿している場合、動画をタブ切り替えで選択して表示できるように工夫してみました。

いくつかのサイトを参考にスタイルシートを使ってタブの表示と切り替えができるようにしました。

記事編集時にYouTubeやニコニコ動画など使用する動画サイトのサービス名と動画のIDを変数化して保存、それをMovableTypeの動画表示用に作成したモジュールに渡して、タブ部分と各サービスの動画貼り付けコードに沿った内容のHTMLを出力しています。

これからも機会があれば動画撮影したものをブログに掲載していこうと思います。