[CSS] 動画の貼り付けコードをレスポンシブに最適化させる

Embedvideo responsive

YouTubeをはじめ様々な動画サイトの貼り付けコードは、そのまま貼り付けるとサイズ調整されずに、レスポンシブレイアウトが壊れてしまう場合があります。レスポンシブサイトに最適化させるには、cssでコンテナを作りwidthをピクセル指定からパーセント指定にしてやります。

以前紹介したFitVids.JSを使う方法(とコンテナを使う方法)では、実質、YouTubeの貼り付けコードのみに対応していましたが、iframe以外にobjectembedにも対応させることで、幅広い貼り付けコードをレスポンシブサイトの表示を崩さずに貼り付けることができます。

続きを読む →

YouTubeなどの動画をWordPressに貼り付ける

YouTubeやGoogleVideoの動画はembedでブログに出力できますが、Wordpressのエディタに出力タグを入力しても表示されません。

そこで、これを解消するプラグインがあります。

[ Viper’s Video Quicktags ]

以下のビデオサイト・ファイル形式に対応

ダウンロードして解凍したら wp-content/plugins にアップロード、プラグインの管理で有効化します。

ws000423.png
ビジュアルリッチエディタを無効化していてもメニューに表示されます。

ws000424.png
使い方は簡単で、YouTubeならビデオファイルのURLにあるビデオIDをコピーして

ws000425.png
YouTubeボタンを押すと出てくるウィンドウにペーストするだけ。