スマホ対応、youtube動画埋め込みプラグイン「Advanced Responsive Video Embedder」を試す

MarcoGonzalez / Pixabay

youtube動画は気軽にホームページやブログに共有コードをコピペして記事の中に埋め込みができるのでよく使っているのですが、クライアントの申告により、動画の右下にあるアイコンで”全画面表示”が効かないということが分かりました。

ということで、最終的にはPCでもスマホでも最適に表示されることを考えてプラグインを使うことにしました。

動画の全画面表示

通常、youtube動画を埋め込む際には下記のようなコードを記事内にコピペして記述します。

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/QDC6YFUizQ8″ frameborder=”0″ allowfullscreen></iframe>

しかし、wordpressにおいて、この中で全画面表示に必要な”allowfullscreen”という属性が消えてしまい保存ができません。

結果、youtube動画は表示できるが、全画面表示ができなくなります。

普段、全画面表示など利用する人がいるかどうか?

クライアントの中には気になる方もおり、いろいろ調べたのですがわからず仕舞い。

プラグインで対応できないか調べて出てきたのが、

Advanced Responsive Video Embedder というやつ。

通常は、youtubeサイトで共有コードをページに貼り付ければ良いのですが、、

最近はスマートフォンで見る人が多くなったことで共有コードにふくまれるPC用になっている画像サイズが邪魔をします。

例えばコードの中に標準だと

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/QDC6YFUizQ8″ frameborder=”0″ allowfullscreen></iframe>

width=”560″はこのままだとPCでは560pxのサイズで見れます。しかし、スマホで見るとはみ出るわけです。

それを一々考えることなく、手間なく、PCもスマートフォンも両方に最適化されて表示されるようにしたい。と、いうことでこの、

Advanced Responsive Video Embedderを導入することにしました。

まずはインストール

プラグイン新規追加

管理画面の左サイドメニューから”プラグイン”→”新規追加”を選択します。

プラグインの検索

プラグインの”新規追加画面”右上の検索窓にプラグイン名”Advanced Responsive Video Embedder”を入れて検索。

検索結果に出てきた”Advanced Responsive Video Embedder”の”今すぐインストール”をクリックします。

プラグインの有効化

次の画面で”プラグインを有効化”をクリックすればインストールが完了です。

設定してみましょう

プラグインの設定

インストールされたら設定です。管理画面左サイドメニューの”プラグイン”から”A.R. Video Embedder”を選択します。

プラグイン設定画面

設定画面を見ると英語だらけなので、何を設定すれば良いのかわかりません。

でも、何も設定をしないでも良いようです。

youtube動画を埋め込んでみます

記事にyoutube動画を埋め込んみます。

記事投稿画面を表示します。

youtube動画を埋め込みます

動画を埋め込みたい場所にカーソルをあて編集画面上にある”Embed Video”をクリック。編集モードは”ビジュアル”のままです。

対象URLをコピペ

Embed Video”をクリックして出てきた画面に埋め込みたいyoutube動画のURLをコピーしてきて、①の欄にペーストします。

すると編集画面に下のようなショートコードが挿入されます。

ショートコード

[youtube id=”bdkO9PWrif0″]

次に”変更をプレビュー”でちゃんと表示されていればOKです。

自動で横幅がちゃんとページのエリア一杯の幅になっています。

スマホ表示

スマートフォンで見ても最適な幅で表示されます。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

2 + 17 =

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください