YouTube動画をレスポンシブ対応するWordPressプラグイン

YouTube動画をレスポンシブ対応

今ではレスポンシブ対応のWordPressテーマを利用しているユーザーさんも増えていますし・
YouTube動画とブログを連動させるユーザーさんもどんどん増えています。

ただし、今現在ではYouTube動画を埋め込むと、スマートフォンでは画面からはみ出してしまうので・動画をレスポンシブ対応させることが必要になります。今回紹介するレスポンシブ対応させるプラグインでは、YouTube以外にもVimeo・Ustream・Dailymotionなどなど、さまざまな動画に対応しています。

スポンサードリンク

YouTube動画でも解説しました

基本的にブログの記事だけで簡単に設定でしますが・・・分かりずらければ、動画と合わせて
確認して下さいね。

※後日、動画は追記しました。動画を見ながら・ブログでみて作業すれば簡単に設置できますよ。

Advanced Responsive Video Embedder設置方法

Advanced Responsive Video Embedder(アドバンスド レスポンシブ ビデオ エンベッダ−)というプラグインを設定して・投稿時にコードを貼り付ければ簡単にYouTube動画を埋め込むことが出来ます。

WordPress Popular Post設置方法

ワードプレス管理画面>プラグイン>新規追加
「Advanced Responsive Video Embedder」を入力し・プラグインの検索

YouTube動画をレスポンシブ対応するプラグイン

「今すぐインストール」をクリックした後、プラグインを有効化する

Advanced Responsive Video Embedder設定方法

YouTube動画をレスポンシブ対応するプラグイン2

ワードプレス管理画面>設定>Advanced Responsive Video Embedder

「Advanced Responsive Video Embedder」の各種設定

YouTube動画をレスポンシブ対応するプラグイン3

・Default Mode:Normal(投稿にそのまま埋め込み)か、Thumbnail(サムネイル)
・Video Maximal Width:動画の最大幅(パソコン上)
・Aligned Maximal Width (Normal Mode):上の最大幅と同じでOK
・Thumbnail Maximal Width:サムネイルを利用する場合
・Fake Thumbnails:チェックする
・Autoplay all:自動再生するかどうか、チェックなし

ここまで、できたら「変更を保存」をクリック。

※ここでは、ノーマル(サムネイルではない)方法で解説していきます。

YouTube動画を投稿時に埋め込む

YouTube動画をレスポンシブ対応するプラグイン4

YouTube動画>共有>コードをコピー

YouTube動画をレスポンシブ対応するプラグイン5

投稿画面:アイコンをクリック(ビジュアルエディタを利用)※テキストでは表示されない

YouTube動画をレスポンシブ対応するプラグイン6

・URL/Embed Code:YouTubeの共有コードをペースト
・Mode:Normalを選択
・Align:動画の位置
・Autoplay this video:自動再生→通常「No」
・Maximal width:なし(デバイス画面の幅)
・Provider:YouTube(動画の種類)
・Video ID:自動でID設定してくれる

上記、設定出来たら任意の場所に動画を埋め込む

YouTube動画をレスポンシブ対応するプラグイン7

プレビュー画面を開き・動画が埋め込まれていればOKです。
投稿後には、スマートフォンなどで確認しておきましょうね。


スポンサードリンク

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

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

ページ上部へ戻る