YouTubeをワードプレスの記事に埋め込む方法を紹介

This post is also available in: English

はじめに

ブログやメディアの運営においても動画の訴求力は非常に高いものがあります。本記事ではYouTube動画をワードプレスメディアに埋め込む方法を紹介します。中身を覚えれば非常に簡単に動画をアップロードすることができます。

Ads

事前準備

本記事の前提としては「YouTube」の任意の動画の準備、および「ワードプレス」でのメディア運営が前提となります。

それでは早速説明に移ります。

 

YouTube動画の埋め込み方法

まず、ワードプレスの管理画面を開きます。

管理画面のメインメニューにある 投稿 > 新規追加 から動画を埋め込みたい記事の編集画面を表示させます。

いくつかYouTube動画の挿入方法があるため1つずつご説明します。

 

YouTubeのURLをコピペする

最もクイックかつ簡単な方法はURLのコピーアンドペーストです。

「ビジュアルタブ」においてリンクをコピペすると自動的に読み込んで以下の画像のようにYouTubeの画面表示がされます。

このやり方は非常に簡単ではありますが、ページで自動調整されるためサイズの指定ができません。

Ads

YouTubeの埋め込みコードを使う

最もカスタマイズ性が高いのがこちらのYouTubeの埋め込みコードを利用する方法です。

YouTubeで動画を再生させます(画像はPCブラウザです)

共有ボタンをクリックすると、共有方法の選択モーダルが表示されます。

コードアイコンが目印の「埋め込む」をクリックします。

クリックすると以下のような画面が出てきます。

オレンジの枠で囲ったコードを編集することでサイズなどの調整を行うことができます。

サイズの調整を行うには、コード上の以下の箇所を編集します。

 

<iframe width=”幅のピクセルを入れる高さのピクセルを入れる” src=”https://www.youtube.com/embed/oK_cPoF6bIE” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

そして、テキストエディタ画面に貼り付けます。

これでビジュアルエディタに切り替えると指定したサイズで表示されていることが確認できます。

例えば、正方形にしたい場合に、仮に450×450で設定するとします。

 

<iframe width=”450” height=”450” src=”https://www.youtube.com/embed/oK_cPoF6bIE” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

 

このコードを貼り付けます。

 

ビジュアルモードで確認をすると正方形に反映されていることがわかります。

 

さらに詳細な指定を行うには?

本記事では、YouTube動画のワードプレス記事への基本的な埋め込み方法の紹介で終わりますが、よりアドバンスなカスタマイズ、例えば自動再生の設定方法やレスポンシブの設定方法など、に関しては以下の記事にてご紹介をしています。

 

最後に

ワードプレスブログやメディアへのYouTube動画の埋め込みに関しては本記事の方法をご参考ください。

動画編集方法について

また、動画そのものの編集方法に関してはお役立ちサービスやアプリをこちらの記事で一気に紹介をしています。

ぜひご覧ください。以上でYouTube動画をワードプレスの記事に埋め込む方法を終了します。

あわせて読みたい

関連記事

はじめに     ワードプレスなどのサイトにおいて、レスポンシブ対応が直近では主流になっていますが、本記事では特にYouTube動画をレスポンシブ対応させる方法をお伝えします。 レスポンシブとは […]

関連記事

はじめに 本記事ではYouTubeの埋め込みコードのカスタマイズ方法を紹介します。ワードプレスブログやメディアの運営において、動画訴求を行う場合によりキメ細やかな設定ができるようになります。 参考:YouTube動画のワードプレスへの基[…]

関連記事

本エントリではスマートフォンの浸透により爆発的に利用が伸びた動画に関する記事です。スマホで撮影した動画をInstagramなどのSNSやYouTubeなどの動画サービスに簡単にシェアできる時代になりました。そこでもう一歩進んでより効果的な動[…]

 

Ads
フォローして最新情報をチェック!

SNSで最新情報を発信中

情報を受け取りたい方は、是非フォローください

ビジネスのご相談

広告掲載 / ライティング支援 /
オウンドメディアコンサルティング / 取材依頼など

お問い合わせ

ライター募集

一緒にUtillyのコンテンツをつくりませんか?
サービスレビューやコラムを執筆いただける方を募集しています。

募集要項