youtube埋め込み動画をレスポンシブにし、スマホ表示でも自動サイズ調整されるプラグイン

youtubeの動画の埋め込みコードはレスポンシブではないのでPC表示の際のサイズに合わせてワードプレスに貼り付けるとスマホで表示した時にテンプレートから動画がはみ出してしまいます。これはプラグインで一発解決するのでぜひ参考にしてください。

youtube埋め込み動画をブログに埋め込む際にレスポンシブ化するプラグインの動画講義

プラグイン名⇒Advanced Responsive Video Embedder

※2016年10/1追記:現在『shortcake』というプラグインの導入を同時にする必要があります。

 

今回のプラグインはスマホ表示で以下のようにyoutube動画の横幅が
はみ出す場合の対処法です。

写真

 

Advanced Responsive Video Embedder導入と使い方

1.Advanced Responsive Video Embedderプラグインをダウンロードし
有効化します。

詳しくは動画の中で手順を紹介しています。

 

2.ワードプレス管理画面左サイドバー「設定」>「A.R.Video Embedder」
をクリックします。

プラグイン

 

3.Advanced Responsive Video Embedder各種設定を行います。

プラグイン

・Defalt Mode

normal=通常モード

Thambnail=サムネイル表示モード

Lazyload=画面内にスクロールされた時に動画を遅延読込させるモード

 

基本的にnormalでOKです。

 

・Aligned maximal width (Normal/Lazyload Mode)

PC表示の際の動画の横幅の最大値を選択します。

 

・Autoplay all

埋め込んだ動画を自動再生させたい場合、こちらのチェックボックスに
チェックを入れてください。

 

あとはいじらなくてOKです。
変更が完了したら必ず「変更を保存」ボタンを押しましょう。

 

4.記事投稿時に「Embed Video」をクリック

プラグイン

 

5.URL,Alignを選択してInsertshotcodeをクリックして完了

緑枠内に埋め込みたい動画のURLを入力します。
また青枠で右寄せ、左寄せ中央寄せの選択を行ってください。

プラグイン

 

※注意 URLの部分に入力するのは埋め込みコードではなく動画の
URLです。

(iframeタグのついた埋め込みコードを入力しないように注意してください)

プラグイン

 

最後にInsert Short Codeをクリックして完了です。

 

写真-1

 

スマホ表示でもyoutube動画をきちんと枠内に収めて最適サイズ表示することが
できました。

当ブログからの無料プレゼントはこちら
バナー

いかがだったでしょうか?参考になれば幸いです

当記事を気に入って頂けましたら、ソーシャルメディアボタンを押して共有して頂けると嬉しいです

このエントリーをはてなブックマークに追加