記事に埋め込まれたYouTube動画

今回は、WordPress記事YouTube動画を貼る方法を解説していきます。

 

記事を書く時は、文章オンリーになるよりも動画や画像が入れた方がイメージを伝えやすくなります

WordPress(ワードプレス)では、記事内にYouTube動画を貼ることでユーザーの滞在時間を伸ばすことができるので、ぜひ使い方をマスターしてくださいね。

記事内に動画を貼る方法を動画で解説

WordPress記事にYouTube動画を貼る方法

では早速、WordPress記事にYouTube動画を貼る方法を見てみましょう。

 

今回はこの下にあるYouTube動画を貼るまで流れについて、順を追って解説していきたいと思います。

 

①まずはYouTube動画のタイトル下にある『共有』という部分をクリックします。

YouTube動画の共有をクリック

 

 

②すると共有のウィンドウが開くので、その中にある『埋め込む』をクリックします。

共有ウィンドウの埋め込むをクリック

 

 

③動画をWordPress内に埋め込むためのコードが出てくるので、『コピー』をクリックします。

WordPressに埋め込むための動画コード

 

コピーができたら、次はWordPressの記事作成画面に戻りましょう。

 

 

④WordPress記事作成画面に戻り、動画を埋め込みたい位置にカーソルを移動させて『中央揃え』のボタンをクリックします。

WordPress記事作成での動画の位置確認

 

※テキストエディタで動画の挿入位置が分かる人は、この部分は特に必要ありません。

 

 

⑤先ほどコピーした動画のコードを埋め込むため、テキストエディタに変更します。

ビジュアルからテキストエディタへの変更

 

 

⑥テキストエディタに切り替えたら、先ほどコピーした動画のコートを貼り付けます。

テキストエディタで動画コードをペーストする

 

今回はH3見出しタグの上に中央揃えで動画を貼っていきます。

 

 

動画コードを貼った状態

動画コードを貼るとこのような感じになります。

 

 

⑦ビジュアルエディタをクリックして確認してみましょう。

記事に動画が貼ってある状態

 

 

うまく動画が貼れていますね。

以上が、WordPressに動画を貼る方法となります。

 

再生ポイントを設定する

YouTube動画を貼る時は、どのポイントから再生させるかを設定することができます。

先ほどの手順②の『共有』ウィンドウで、開始位置にチェックして再生させたい時間を入力すれば、動画を記事に埋め込んだ時に指定した時間から始まります。

 

YouTube動画の開始位置の設定

 

スマホ対応のコードを設定する

YouTube動画を貼る時に注意したいのは、使用しているWordPressテンプレートがレスポンシブデザイン(スマホで見た時に崩れないデザイン)に対応しているかどうかです。

スマホ画面で見た時に記事に埋め込んだYouTube動画が、画面から飛び出していたり、スマホのサイズに合ってなかったりした場合は、レスポンシブ対応(スマホ対応)していないので、スマホ対応のコードを設定しておくと良いでしょう。

 

 

レスポンシブ対応についてはこちら!
パソコンでスマホ画面を表示!レスポンシブデザインの確認方法

 

 

もしも使っているWordPressテンプレートがレスポンシブ対応でなくても、無料でレスポンシブ対応の埋め込みコードを作成してくれる便利なサイトがあるので問題ありません。

⇒Embed Responsively

 

①サイトを開いてレスポンシブ対応コードを作成したい動画のURLを貼り、『Embed』をクリックします。

レスポンシブ対応のコードを作成

 

 

②レスポンシブ対応のコードが作成されました。

作成されたレスポンシブ対応コード

後は、このコードを先ほどの⑤からの手順に従ってコピーしていくだけです。

 

 

ということで、今回の解説は以上となります。

動画を記事に埋め込むことでイメージが伝えやすくなり、さらにユーザーの滞在時間が上がるようになりますよ。

そして、動画をスマホ対応にして最適化しておくことで、スマホユーザーからの再生もきちんと行われるようになるでしょう。

 

ちなみに、私が使っているWordPressテンプレート『賢威7』だと、レスポンシブ対応+埋め込みたいYouTube動画のURLをビジュアルテキストに貼り付けるだけで動画の埋め込みができるので非常に楽ちんです。

このように時間短縮されるツールは、どんどん使っていくと良いですね。

ぜひ参考にしていただければと思います。