近年爆発的に活用が広がっている動画。 Show
動画をサイト内に取り入れることで、文章では伝わりにくい部分を捕捉できたり、CMのように効果的に商品のプロモーションができたりとメリットも大きいです。 そのため、YouTube動画をWordPressの記事内に埋め込みたいと思うこともあるでしょう。 記事の中にYouTube動画を埋め込むのは「専門知識が無いと難しそう」と思うかもしれませんが、WordPressではとても簡単。 本記事では、WordPressの記事内にYouTube動画を埋め込む方法を3つご紹介。 ※WordPress開発の依頼先をお探しの方は、こちらの記事をご覧ください! YouTubeを埋め込む方法を3つご紹介します。 方法1:埋め込みたいYouTube動画のURLをそのまま貼り付ける一番簡単なのが、YoutubeのURLをそのまま貼り付ける方法です。 動画の表示サイズや再生位置などの細かい設定はできないのですが、専門的な知識は不要ですので、初心者や簡単な方法でやりたい方にオススメです。 まずは記事に埋め込みたいYoutube動画を開き、URLをコピーします。 WordPressのバージョン5.0から、ブロックエディタという新しいエディタが導入されています。 URLの入力画面で、先ほどコピーしたYouTubeのURLを貼り付け、埋め込みボタンを押します。 以前のエディタであるクラシックエディタをお使いの方は、ビジュアルモードにした状態でコピーしたURLを貼り付けてください。 同じ行にURL以外の文字を入れると反映されないので、必ずURLのみを記載しましょう。 記事の中にYouTube動画の埋め込みができました。 URLを記載したにも関わらず動画が表示されない場合、HTMLのタグが正しくない可能性が。 テキストエディタに切り替え、URLが<p> </p>で囲まれているか確認します。 方法2:ショートコードを利用して埋め込む動画のサイズを変える場合、[embed]というコンテンツを埋め込むショートコードを使用します。 ※使用しているテーマによってはサイズが変わらなかったり、作者の意向により[embed]を無効にしていることがあります。その場合この方法は使えませんので、方法1か3を使用してください。 ショートコードは以下のように記載します。 [embed width="幅" height="高さ"]YouTubeのURL[/embed] ただし、YouTube動画の幅と高さの比率は変えらないので、幅:高さを16:9にしましょう。 まずは、記事に埋め込みたいYoutube動画を開き、URLをコピーします。 ブロックエディタをお使いの方は、投稿画面のブロックの追加から「ウィジェット」を開き、「ショートコード」を選択します。 ショートコードを入力する画面でショートコードを書き、先ほどコピーしたURLを貼り付けます。 今回は幅を320px、高さを180pxで表示されるようにしたので、以下のようになります。 [embed width="320" height="180"]https://www.youtube.com/watch?v=ssfHW5lwFZg&feature=youtu.be[/embed] クラシックエディタをお使いの方は、以下のようにショートコードを記載します。 記事の画面はこのようになります。 方法3:YouTubeで埋め込み用のコードを取得して利用する埋め込み用コードでは、表示する動画のサイズだけでなく再生開始位置も変更できるように。 記事に埋め込みたいYoutube動画を開き、共有をクリックします。 すると、以下の様な画面が出るので、「埋め込む」をクリック。 以下の様な画面になります。 表示サイズを変えたい場合は、width="xx"(幅) height="xx"(高さ)を変更します。 開始時間を変更したい場合は、「開始位置」にチェックを入れ、時間を記入します。 埋め込みオプションは基本的にデフォルトで大丈夫ですが、必要があれば変更してください。 プレーヤーのコントロール バーを表示する:早送り、巻き戻し、ボリュームなど操作バーを表示。 設定が全て完了したら、右下の「コピー」をクリックすると、コードがコピーされます。 ブロックエディタをお使いの方は、投稿画面のブロックの追加から「フォーマット」を開き、「カスタムHTML」を選択します。 入力フォームが出るので、ここに先ほどコピーしたコードを貼り付けます。 クラシックエディタの方は、テキストエディタに切り替え、コピーしたコードを貼り付けます。 動画が表示されました。 おまけ:再生リストを埋め込む方法単一の動画だけではなく、YouTubeの機能である再生リストも埋め込みができます。 再生リストは、複数の動画を1つにまとめられる機能。 同じジャンルの動画などをまとめて表示させたい場合に便利です。 通常の動画と同様に、埋め込みたい再生リストの画面へ行きます。 あとの埋め込み方法は上記で紹介した方法1〜3と同じ。 YouTubeをWordpressに埋め込む際に便利なプラグイン4選WordPressにはYouTube動画を埋め込むための便利なプラグインが多数あります。 Embed Plus for YouTube|YouTube動画のギャラリーやプレイリストが簡単に作れるYouTubeチャンネルやプレイリストをギャラリーにできるプラグイン。 記事内だけでなく、ブログやサイトのサイドバーにも埋め込みができます。 動画が目次のように表示されるので、ユーザーが動画を選びやすいです。 下図のようにプレイリストのURLを登録するだけで、簡単に埋め込みができます。 ただし、このプラグインは日本語には対応していなません。 少し上級者向きのプラグインだと言えます。 公式サイト Video Gallery|無料から使えるレスポンシブ対応のギャラリー作成プラグイン自分で好きな動画を組み合わせ、レスポンシブ対応のギャラリーを作れるプラグイン。 ギャラリーのデザインが豊富で、色やサイズなど細かい設定もできます(一部機能は有料)。 管理画面でプレイリスト作ったり、デザインの調整ができます。 日本語には対応していませんが、操作は難しくはないので初心者でも使いやすいプラグインです。 公式サイト WP YouTube Lyte|YouTube動画の読み込みスピードを速くするプラグインYouTube動画の読み込み速度を早くできるプラグイン『WP
YouTube Lyte』です。 1ページに複数のYouTube動画がある際に、読み込み速度のアップが期待できます。 操作は簡単で、埋め込みの際にYouTubeのURLを「https」から「httpv」に変えるだけ。 ただし、使用にはYouTube API Keyの取得がおすすめ。 公式サイト ARVE|これ1つでOK!多機能なYouTube動画埋め込みプラグインレスポンシブ対応に便利なプラグインで、SEO対策として動画のタイトルや説明文が付く機能も。 有料版にするとLazy Load(遅延読み込み)やLightbox(ライトボックス)という背景が黒くなり、画面中央に動画が浮き出るようにする機能が使えるようになる多機能なプラグインです。 YouTube動画のURLを貼り付けるだけで、埋め込みができます。 登録すると、ショートコードが生成されます。 以前、WordPressのデフォルトの埋め込みではレスポンシブ対応がなく、重宝されていました。 動画をただ埋め込みたいだけならWordPressのデフォルトで十分。 公式サイト YouTubeをWordpressに埋め込む際の注意点YouTube動画はWordPress内に簡単に埋め込めますが、注意点もあるのでお気をつけください。 著作権に違反していないかチェックする他人がアップロードした動画を埋め込む際には著作権侵害に当たらないよう、注意が必要。YouTubeのアップロード動画をサイトに埋め込むことは、著作権違反ではないとされています。 ただし、中には映画やTV番組、音楽などの著作権ものがアップロードされていることも。 たとえ他人が違法アップロードしたものでも、自身のサイトに埋め込むことで著作権侵害の幇助(ほうじょ)になってしまい、処罰の対象に。 動画がページの他のコンテンツや記事の内容にマッチしているかチェックする記事の内容とずれた動画や、宣伝目的の関係ない動画は読者に違和感や不信感を与えます。 動画の内容について文字情報をつけて補足をするサイトの主役は文章で、動画はあくまでも分かりやすく伝えるための補足のツール。 読者は必ず動画を見ているとは限りません。 動画を見なくても内容が伝わるよう、きちんと文章で情報をつけましょう。 WordpressへのYouTubeの埋め込み方のまとめWordPressではYouTube動画が簡単に埋め込めます。 動画は正しく取り入れれば、文字だけの記事より内容が伝わりやすいものなるでしょう。 YouTube埋め込み方法まとめ
本記事でご紹介した方法やプラグインでは、求めているものが出来ない…。 という場合は、WordPressに詳しいプロに頼むという方法もあります。 もっとこだわりたいという方は、ぜひご検討してみてはいかがでしょうか。 関連記事:【画像付き】WordPressの始め方。初心者が最初にやることやプラグイン・テーマを解説 Wordpressを活用したサイト制作をプロに任せたい方へホームページ制作会社なかなか探す時間がないという方は、ぜひWeb幹事にご相談ください。 コンサルタントのご紹介 様々なお客様のWeb制作を実際に行ってきましたので、 あなたの目的や予算にに合わせて最適な会社をご紹介させていただきます。 【無料】Wordpressに強いHP制作会社を紹介してもらう |