linkerは「人と人」「人と情報」「人と物」をつなぐデザインユニットです。

YouTubeの動画を貼り付けるiframeとobjectのメモ

みなさん、こんにちは、まーしーです。
英会話の例文で「heroは誰か」と聞かれる例文があるのですが「そんなのいない」と答えると「困った」みたいな顔をされてこちらも困ってしまいます。文章を理解してないだけですかね??

さて、YouTubeの動画をブログ記事に貼り付けて利用することがあるかと思います。

ブログなどのエディタから直接とか色々やり方はあるかもしれませんが、YouTubeのページで用意されている「Share > Embed」はデフォルトがiframeを使ったコードになっているようです。

110505-02.jpg

<iframe width="425" height="349" src="http://www.youtube.com/embed/pE-hZl0fdrg" frameborder="0" allowfullscreen></iframe>

実際に貼り付けるとこのような感じです。


iframeでもよいですが、エディタによってはiframeを受け付けない場合もあり保存時に削除されてしまう場合もあるでしょう。
そういったときは「Enable privacy-enhanced mode」にチェックをいれてobjectを使うコードにしておくと良いです。

110505-01.jpg

<object width="425" height="349"><param name="movie" value="http://www.youtube-nocookie.com/v/pE-hZl0fdrg?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube-nocookie.com/v/pE-hZl0fdrg?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" width="425" height="349" allowscriptaccess="always" allowfullscreen="true"></embed></object>

これでもダメな場合は古いバージョンのコードを使う方法でも対応できるかもしれません。

iframeがNGてobjectがOKとかは普通に使っていると気づきにくい場合もあるかもしれないので、エディタ側で対応すべきところもあるでしょうが、もしデフォルトのコードを貼ってうまく表示されなかった場合などは試してみてはどうでしょうか?