WordPressでYoutube動画を埋め込む
サイトやブログ作成でYoutube動画を使用するとき、埋め込み動画で再生後に関連動画を見せたくない、動画を埋め込むと小さいサムネになるから見せたくないんだけど、大きいサムネにもしたくない、だからといってYoutubeのサイトにユーザーを誘導したくない、など細々とした要望がでてくる時があるかもしれない。
そんなときにWordPressを使用しているサイトであれば以下の方法を使うと楽に解決できる。
Youtube動画埋め込み時に関連動画を見せないようにする方法
埋め込み動画で動画の再生後に関連動画を見せたくない場合は、現在は動画のループ再生を設定しておくしかない。(以前まではYoutubeのサイト上にループ再生設定があったができなくなった)
iframe埋め込みコードの中の動画URLで少しコードを追加すればよいだけ。https://www.youtube.com/embed/“<video ID>?loop=1&playlist=<video ID>” の” ” の部分を追加すればOK。” ” (ダブルクォーテーション)は必要ないのでご注意を。
つまりこの動画の場合、
↓の太字の部分を追加すればOK。
＜iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/zFuWM6MzRl0?loop=1&playlist=zFuWM6MzRl0” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen=”allowfullscreen”＞＜/iframe＞
WordPressサイトでYoutube動画をポップアップ表示させる方法
一般的にはポップアップ表示にはJavascriptライブラリを使用するなどすると思うが、WordPressではプラグインを使用して簡単に機能を追加することができる。
使用するプラグインはこちら↓
プラグイン Popup Maker
紹介動画はこちら。
ポップアップ表示させる方法は以下。
- WordPressのプラグイン新規追加から Popup Maker を検索してインストールして有効化
- 左側のメニューに Popup Maker という表示されるので”Add Popup”をクリック
- ポップアップ表示させたい動画のURLを貼り付ける、またはiframeの埋め込みコードを貼り付ける。
- 上記の”<video ID>?loop=1&playlist=<video ID>”を付けた状態でiframeコードを貼り付けるとポップアップ表示で動画の繰り返し作成ができる
- Display の Popup Theme の箇所でポップアップの表示され方を設定できる (ポップアップの外枠の色など)
- 公開ボタンを押して、”All Popup”のポップアップ設定リストページに戻る。
- “CSS Classes” のカラムのところに”popmake-XXXX” と書かれたCSSのクラスが表示されているので、それをコピー
- ポップアップ表示させたいボタンやテキスト周辺にHTMLコードを書く (例: <a class=”popmake-XXXX”>ここをクリック</a>)
↓をクリックしてどのように表示されるかを見てみてください。
こんなふう動画が表示されるので、ユーザーを動画に集中させたいときやコンタクトフォームなどを表示させたいときに使うとよいかも。(スマホからの確認だとポップアップが表示されなかったので詳細の確認が必要)
必要な人はお試しくださいまし。
コメント