
数年前から色々なサイトでこの対処法について触れられていますが、ブラウザによっては本意でない挙動になる、場合があるので個人的な留意点をメモ。
XHTML Valid で最もシンプルと思われる記述方法 *** はYouTube動画のID
<object data="http://www.youtube.com/v/***" type="application/x-shockwave-flash" width="560" height="340">
<param name="movie" value="http://www.youtube.com/v/******" />
<a href="http://www.youtube.com/watch?v=***">http://www.youtube.com/watch?v=******</a>
</object>このようなコードにすれば XHTML Valid になるのはご周知の通りですが、YouTubeの動画を掲載したページ内で、Litebox に代表される画像ポップアップ表示のスクリプトなどを同時利用する場合は注意が必要です。
このままだと、動画(Flash)がページの最前面に位置しているため、ポップアップした画像が動画の下に入り込んでしまいます。この症状は、CSSで z-index の指定をしたとしても回避できませんので、下記3行目のコードを追加します。
<object data="http://www.youtube.com/v/***" type="application/x-shockwave-flash" width="560" height="340">
<param name="movie" value="http://www.youtube.com/v/***" />
<param name="wmode" value="transparent" />
<a href="http://www.youtube.com/watch?v=***">http://www.youtube.com/watch?v=******</a>
</object>右が param name="wmode" value="transparent" を追加したものです。
画像ポップアップ
これで万事解決、と言いたいところですが、ブラウザによっては動画上でスクロールができなくなる場合があります。
・IE 8 : 右側の動画上
・Firefox 3.6 , Safari 4 : 左側の動画上
・Chrome 4 , Opera 10.5 : 左右共スクロール可
*すべてWin版 3月17日現在のバージョン
どの挙動が本来のものなのか分かりませんが、スクロールができなくなるというのは、閲覧者にとって相当なストレスになると思われます。
YouTubeの使用頻度や再生動画のサイズ(十分な余白の確保)、あるいは画像の見せ方、重視するブラウザなどを考慮の上、ベターなコードを選択する必要がありそうです。
素人のメモです。Valid、スクロール可(全ブラウザ)、ポップアップ不具合無し、という方法があるかもしれません…。
