WordPressサイトにYouTubeやVimeoのビデオをカッコよくエンベッドするFluid Video Embeds

fluid_video_embeds_-_wordpress_plugins

WordPressの動画エンベッドは貼り込みの幅に制限がある

WordPressはYouTubeやVimeo動画が簡単にエンベッドできます。単純に動画のURLをコピーして本文にペースとするだけ。ビジュアルエディタ上でもプレビューで貼り込むことができます。

またサイズを小さく指定してエンベッドするのであれば

%e6%96%b0%e8%a6%8f%e6%8a%95%e7%a8%bf%e3%82%92%e8%bf%bd%e5%8a%a0__%e3%83%99%e3%83%88%e3%83%8a%e3%83%a0%e8%b5%b7%e6%a5%ad%e6%97%a5%e8%a8%98_-_wordpress

のように動画のURLの前後にエンベッドタグをつけてやりwidth指定をすることもできます。

問題はうちのサイトのようにFull Widthの投稿画面の場合です。

embedpng

としても元動画のサイズ以上にはレイアウトされません。やりたいことは画面の幅全体に合わせて動画をエンベッドすることです。

%e7%80%ac%e6%88%b8%e5%bc%98%e5%8f%b8%e3%81%ae%e3%83%9f%e3%83%84%e3%82%a2%e3%82%adtv%e3%81%8citunes%e3%81%a7%e9%85%8d%e4%bf%a1%e9%96%8b%e5%a7%8b%ef%bc%9e%e3%80%90%e9%80%9f%e5%a0%b1%e3%80%91%e3%83%9f

Fluid Video Embedsで解決

解決策はFluid Video Embedsプラグインを導入することで可能です。

Fluid Video Embeds

プラグインを導入して動画URLの前後に以下のようにShortCodeを挿入します

fve

手打ちでコードを入れてやらなければならないのが少しまどろっこしいですが、このようにサイトの幅全体に合わせて動画をエンベッドすることができます。

%e7%80%ac%e6%88%b8%e5%bc%98%e5%8f%b8%e3%81%ae%e3%83%9f%e3%83%84%e3%82%a2%e3%82%adtv%e3%81%8citunes%e3%81%a7%e9%85%8d%e4%bf%a1%e9%96%8b%e5%a7%8b%ef%bc%9e%e3%80%90%e9%80%9f%e5%a0%b1%e3%80%91%e3%83%9f

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pocket
Pocket