WordPressで動画を埋め込む場合、初期設定ではこれらの動画はレスポンシブではありません。レスポンシブWordPressテーマの台頭により、小さい画面でサイトを訪れたユーザーは、引き伸ばされ不釣り合いな動画コンテナを見ることになります。この投稿では、FitVidsを使ってWordPressで動画をレスポンシブにする方法を紹介します。
FitVidsはjQueryプラグインで、動画の埋め込みをレスポンシブにすることができます。WordPressサイトで使用したい場合、必要なことはすべてFitVids for WordPressプラグインをインストールして有効化することです。有効化した後、外観 ” FitVidsに行き、CSSセレクタクラスを入力する必要があります。WordPressは自動的に投稿に.postクラスを追加するので、それを使えばいい。
変更を保存し、サイトをプレビューしてください。動画が適宜調整されるのを見るには、ブラウザー画面のサイズを変更する必要がある。
動画チュートリアル
動画が気に入らなかったり、もっと説明が必要な場合は、このまま読み進めてください。
WordPressで動画をレスポンシブにするためにFitVidsを手動で追加する
WordPressのプラグインFitVidsをインストールしたくない場合は、手動でFitVids jQueryプラグインを追加することができます。あなたがする必要がある最初の事はあなたのコンピューターにFitVids jQueryプラグインをダウンロードして抽出することです.今、あなたのテーマのjsディレクトリに抽出FitVids.js-マスターフォルダをアップロードする必要があります。
FilezillaのようなFTPクライアントを使用してサイトに接続し、テーマディレクトリを開く必要があります。WordPressテーマにjsフォルダーがない可能性があります。それがない場合は、作成し、あなたのコンピューターからFitVids.js-masterフォルダをアップロードする必要があります。
jsフォルダーの中に、新規ファイルを作成し、名前をFitVids.jsにする必要があります。このファイルを編集し、その中にこのコードを貼り付けます。
[SKX1］
(関数($) {)
$(document).ready(function(){)
// .コンテナ、.ラッパー、.投稿などをターゲットにします。
$(".post").fitVids()；
});
})(jQuery)；
[SKX2］
上記のコードは、FitVidsに.postCSSセレクタクラスを探すように指示しています。FitVidsの準備ができたので、WordPressテーマにjavascriptsを適切に追加しましょう。
テーマのfunctions.phpファイルに以下のコードをコピー＆ペーストしてください：
wp_enqueue_script('fitvids', get_template_directory_uri() . '/js/FitVids.js-master/jquery.fitvids.js', array('jquery'), '', TRUE);
wp_enqueue_script('fitvids-xtra', get_template_directory_uri() . '/js/FitVids.js', array(), '', TRUE);
これで完了です。これでWordPress動画のレスポンシブ化は完了です。
この投稿がお役に立てば幸いです。フィードバックやご質問は、以下にコメントを残すか、Twitterや Google+にご参加ください。
Joe Bowls
This no longer applies. Plugin has been updated. It no longer works for me.
WPBeginner Support
We will be sure to take a look and consider alternatives when we next update this post
管理者
smithy
Not perfect, but with Jetpack, and WP ‘out of the box’, this css will make youtube video embeds fit 100% content width responsively – requiring no plugins etc. so very ‘compact’. The ‘padding’ keeps the aspect ratio.
span.embed-youtube {
position: relative;
padding-bottom: 56.25%;
padding-top: 18px; height: 0; overflow: hidden;
}
span.embed-youtube iframe,
span.embed-youtube object,
span.embed-youtube embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
If it helps anyone.
Flemming
This works perfectly for me (self hosted WP site). I originally used a plugin called Advanced Responsive Video Embedder which is really good but it didn’t play nicely with OptimizePress plugin.
The FitVids plugin does exactly what I need with no problems (so far!) – thanks so much for writing this post, saved me a headache!
Danny
A post about how to embed responsive videos yet the video in the post itself is not responsive… hmmm
Anthony baker
You should add that you cannot add plugins with free version of wordpress.com.
Anthony baker
OH, it seems this article is for wordpress.org. So confusing. So if I have the premium version of Wordpress.com can I add this plugin?
Gabor
The other thing is that,in case i set .post-entry /that is for me/
than all the post will be responsive and the amazon widget that i add will be too.Which expands on the whole post…any workaround?
flashbytes
Is there a way to avoid multiple new js files? Wouldn’t it be possible to add this js (both files) to one that is already being loaded by default, so the page load doesn’t suffer as much as it would, if there were three files instead of one?
Rob
Thanks!!!! adding the
.post, .page
into the CSS selector worked great for me and the pages I have videos on…I have yet to add a blog post but I’m sure it should work fine with that since it worked for me on my pages
THANKS!!!!
raffaella paolone
hello
thank you for this article
how about fitvids and videos in widgets?
selector?
Michael Boll
Thanks for this great tip.
Do you know of a plugin that will allow video to be seen on an ipad?
We are a school using WOrdpress like crazy (self hosted) but when we upload video to our wordpress sites, it cannot be seen on an iPad.
Looking for a plugin to fix this. Any suggestions?
We can view all other videos on an iPad, just not ones hosted on our own wordpress server. Not sure why it does not render in HTML 5.
Thanks,
Mike
WPBeginner Support
Michael, We think users should never upload videos to WordPress. We think embedding videos from a source like YouTube or Vimeo are a better alternative. However, if you must upload video, then WordPress comes with the video shortcode since version 3.6. Your videos must be in iPad supported format like mp4, m4v, ogv, mov, etc. You can also use a program like WinFF to convert your videos into iPad supported format.
管理者
Denis McCaul
I have since researched and found that adding
.post, .page
rather than just .post means it now works for me on Posts and Pages.
Any solutions to the incompatability with Plugin “Lazy Load for Videos” greatly appreciated.
Thanks, Denis
Denis McCaul
I installed the plugin and followed your set up instructions, good news and bad.
Good news, it works.
Bad news
1. It is not compatible with the Plugin “Lazy Load for Videos”. I had to deactivate that one for it to work. So page now takes longer to load especially if multiple videos.
2. I added the .post CSS selector as advised in the settings. This makes it work on Blog posts but not on Video’s embedded on Pages. If you change .post to .page instead it will thenl work on pages but not posts.
Any way to fix these problems?
Thanks, Denis