YouTubeをブログに貼り付けやすくしてみた
2006.06.16
最近になってYouTube上のCMのリンク集のエントリーを二つほど書いたが、「おもてなし」の面で言えば、やはりブログエントリーそのものに動画を埋め込みたい。しかし、二つほど問題がある。一つはこのブログが使っているTypepadサービスがobjectタグを受け付けないこと、もう一つがYouTube標準の大きさ（４２５ｘ３５０）がこのブログには少し大きすぎること。
そこでちょっとしたPHPのプログラムを書いて、iframeを使ってこのブログに埋め込められるようにしてみた（TypepadはobjectタグはNGだが、iframeタグはOK）。大きさも、このブログ標準の画像の標準サイズの、幅３２０ピクセルで表示するように指定した。
下がこの仕組みを使った例。画像のまんなかのプレーボタンをクリック（ただし、IEはセキュリティセッティング次第では2回クリックが必要）すると動画が始まる。
iframeタグが使えてobjectタグが使えないブログがTypepad以外にあるかどうかは知らないが、少なくともTypepadユーザーにとってはこれはなかなか重宝するサービスではないかと思う。
ということで、ここでこのサービスの使い方も公開。以下のIFRAMEタグの{ID}の部分を、表示したいYouTubeビデオのID（上の例では"N3dlYWfNVl8"）に変更してエントリーの一部として貼り付けるだけだ。
<iframe marginwidth="0" marginheight="0" src="http://www.uicentric.com/php/youtube.php?id=｛ID}" frameborder="0" width="320" scrolling="no" height="278"> </iframe>
TypePad に YouTube の object はそのままはりつけられますよ。
http://bulknews.typepad.com/blog/2006/06/control_google_.html
Edit HTML にいって貼り付ければとくに問題なく。
Posted by: miyagawa | 2006.06.17 at 03:13
私のところでは同じようにiframeを使って、Amazonのアフィリエイト広告も貼れるようにしてみました。
http://teddy-g.cocolog-nifty.com/blog/2006/04/youtubeamazon_cad7.html
オマケとして貼り付け用のBookmarkletとパラメータ（貼り付けサイズ等）設定フォームも作ってあります。
まあ、動画の上に広告が重なるのはうっとうしくもあるのですが…。
Posted by: TEDDY-G | 2006.06.17 at 05:07
Satoshiさん、動画コンテンツ自身へ操作ボタンを設置することで、オペレーションが固定化されるため、リスナーの操作性は向上すると思います。すなわち、動画に対する操作性、および、画面の単一性において、『おもてなし満足度』は高まっていると思う。ただし、これがすぐに『マイクロペイメント』につながるかと聞かれると、コンテンツ自体が持っている『バリュー』に大きく左右されていると予想されます。
Posted by: Maki | 2006.06.18 at 14:09
TB送り先を間違えてしまいました。失礼しました。
本当はジミーちゃんの動画のエントリの方にしたかったのです…。
Posted by: junmaru | 2006.06.20 at 06:27
＠ニフティのココログもobjectではエラーになって使えなかったのですがiframeで貼り付け出来るようになりました。貴重な情報ありがとうございます。
Posted by: 正佳to管理人 | 2006.09.03 at 07:20
Satoshiさん、はじめまして。Satoshiさんの記事を拝見して、YouTubeを綺麗に貼り付けることができました。本当にありがとうございます。まとまりのないコメントですみません。
Posted by: ようこ | 2006.10.10 at 02:49
はじめまして！音楽大好きでPC音痴の私です。貼付け参考にさせてもらいました。有難うございます。
Posted by: billmon | 2006.11.23 at 07:50
こんにちは、グーグルで検索して、こんな便利なツールがあることを知りました。
当方のブログで遣わさせていただきました。
ありがとうゴザイマス。
もし問題がありましたら教えてください。
Posted by: チベット | 2006.12.27 at 23:39
アバクロ 銀座
ww.abercrombieandfitchmall.com" title="アバクロ 通販">アバクロ 通販
Posted by: アバクロ 銀座 | 2010.03.09 at 07:18