XHTML文書にニコニコ動画のサムネイルを埋め込む方法

「MODxのチュートリアル動画をニコニコ動画に投稿しました」に埋め込んでいるニコニコ動画のサムネイルは、動画ページに表示される貼り付け用のHTMLをXHTML 1.0 Strict文書に合わせて修正しています。

ニコニコ動画を埋め込むための元々のHTMLは次のようになっています。

<iframe width="312" height="176" src="動画のサムネイルページのURI" scrolling="no" style="border:solid 1px #CCC;" frameborder="0"><a href="動画ページのURI">動画のタイトル</a>

XHTML 1.0 Strict、XHTML 1.1ではiframeという要素型は定義されていません。そこで、これらのXHTML文書にもニコニコ動画のサムネイルを埋め込めるように修正してみます。

本来であれば、ifame要素をobject要素とすることで、XHTML 1.0 Strict文書としての妥当性を損なわずにニコニコ動画のサムネイルを埋め込むことができます。しかし、セキュリティ設定によっては、IEでは外部のリソースを参照するobject要素が正しくレンダリングされません。

色々と試してみたもののうまくいかなかったので、不本意ながら、IEにはJavaScriptでiframe要素を出力することにしました。まず、次のようなJavaScriptファイルを作成します。

nicovideo.js

document.write('<iframe src="動画のサムネイルページのURI" width="312" height="176" scrolling="no" style="border:solid 1px #CCC;" frameborder="0"><a href="動画ページのURI">動画のタイトル</a></iframe>');

次に、IEの条件付きコメントを使用して、IEの場合には上記のJavaScriptでiframe要素を出力するようにします。noscript要素を付け加えることで、JavaScriptが無効な場合にはテキストリンクが表示されるようになります。IE以外の場合にはそのままobject要素とします。

<ul class="thumbnail">
  <li>
    <!--[if IE]>
      <script src="nicovideo.js" type="text/javascript"></script>
      <noscript><a href="動画ページのURI">動画のタイトル</a></noscript>
    <![endif]-->
    <!--[if !IE]> <-->
      <object data="動画のサムネイルページのURI" type="text/html" width="312" height="176"><a href="動画ページのURI">動画のタイトル</a></object>
    <!--> <![endif]-->
  </li>
</ul>

見やすいように改行していますが、一行で書いておくと不都合がおきにくいと思います。

JavaScriptでユーザーエージェントを判別した方がスマートに思えるかもしれませんが、そうするとJavaScriptが無効な環境に対応するのが困難になります。また、document.writeメソッドは、メディアタイプがapplication/xhtml+xmlなXHTMLでは機能しないのでやっかいなことになります。