おすすめツール

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動画をきちんと枠内に収めて最適サイズ表示することが
できました。

著者プロフィール

keishi
1988年生まれ/早稲田大学社会科学部卒

好き:無印良品、mac、ラッコ、シンプルで上質なモノ。

嫌い:目覚まし時計、しいたけ、体育会系ノリ。

『就職したくない。。。ってか、朝早く起きれない。』

そんな思いで、就活で挫折していた、2013年の5月(25歳のとき)に0からPC1台、ネットビジネスを始めたのがきっかけ。

現在はビジネスコミュニティの運営、Webマーケティング、アフィリエイト、コンサル、などの活動が中心。

【実績】
2013/5 :ネットビジネス開始
2014/7 :月収100万円達成(プロモーション)
2015/2 :月収200万円達成(プロモーション)
2015/9 :月収1600万円達成(プロモーション)
2016/1 :月収200万円達成(自動化)
2016/9 :月収3000万円達成(プロモーション)
2017/2 :月収400万円達成(自動化)
2017/10:月収4900万円達成(プロモーション)

“1台のPC以外、持たない小さな起業という働き方を通して、心地のよいくらしを創る”ことを発信しています。

1台のPC以外、持たない小さな起業という働き方を0から実現するための教科書&メルマガの購読者は1万人を突破。

1台のPC以外持たずに、自由に働く月収100万円プレイヤーを多数輩出している、keishiが制作した小さな起業実践のための初心者向けの教科書『Net business navigation』が期間限定で無料で全てダウンロードできます。詳しくはこちら↓

期間限定ですので、興味があればこちらから今すぐご登録頂くことをおすすめします。