ユーティリーは、仕事やライフスタイルの ”はかどる” サービスを紹介していくメディアです

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

This post is also available in: English

Ads

はじめに

ブログやメディアの運営においても動画の訴求力は非常に高いものがあります。

本記事ではYouTube動画をワードプレスメディアに埋め込む方法を紹介します。

中身を覚えれば非常に簡単に動画をアップロードすることができます。

 

事前準備

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

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

 

YouTube動画の埋め込み方法

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

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

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

 

YouTubeのURLをコピペする

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

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

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

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動画をワードプレスの記事に埋め込む方法を終了します。

簡単便利でハイクオリティ!動画編集アプリ/動画編集サービスまとめ14選

 

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