動画はサイトに活気を与え、ユーザーのエンゲージメントを高める素晴らしい方法です。
幸いなことに、WordPressはYouTube、Vimeo、Facebook、Twitterなどの動画ホスティングサービスから動画を埋め込むのがとても簡単です。
この初心者ガイドでは、WordPressブログの投稿、ページ、サイドバーウィジェットに動画を簡単に埋め込む方法をご紹介します。
なぜWordPressブログ投稿に動画を埋め込むのか？
WordPressブログに動画を追加することは、訪問者の注意を引き、エンゲージメントとコンバージョンを高める素晴らしい方法です。
動画はユーザーがWordPressサイトに滞在する時間を増やすのに役立ちますし、訪問者の中には文章を読むよりも動画を見たがる人もいます。
WPBeginnerでは、最も人気のあるWordPressチュートリアルに動画を埋め込んでいます。
WordPressに直接動画をアップロードすべきか？
まあ、それは可能だが、そうすることはお勧めしない。
ほとんどの小規模ブログはWordPressの共有ホスティングサービスを利用しており、動画はサーバーリソースを大量に消費します。動画のトラフィックが多い場合、サイトがクラッシュする可能性が高くなります。
第二に、ユーチューブ・ユーザーや他の動画ホスティング・サービス・サイトからのトラフィックを逃している。
YouTubeは最大の動画ホスティングサービスであるだけでなく、世界で2番目に人気のある検索エンジンであり、Facebookに次いで2番目に人気のあるソーシャルネットワークでもある。
YouTubeに動画をアップロードしたくない場合は、Vimeo、Jetpack Video、Wistiaなどの他のプラットフォームを使うことができる。
詳しくは、WordPressのメディアライブラリに動画をアップしてはいけない理由の投稿日をご覧ください。
それでは、WordPressブログ投稿に動画を埋め込む方法を順を追ってご紹介しましょう。以下のクイックリンクから、お好きな方法にジャンプしてください：
もし、文章での説明がお望みなら、このまま読み進めてほしい。
方法1：ブロックエディターを使ってWordPressブログ投稿やページに動画を埋め込む
WordPressにはオートエンベッドという素晴らしい機能があり、あなたのサイトがYouTubeやVimeoなどの人気の動画ホスティングサービスから自動的に埋め込みコードを取得することができます。
WordPressエディターに動画のURLを貼り付けるだけです。
例えば、埋め込みたい動画のYouTubeのURLをコピーすることができる。
次の投稿では、動画を追加したいWordPressの投稿またはページを編集し、コンテンツエリアにURLを貼り付けるだけです。
動画のURLを貼り付けると、WordPressが埋め込みコードを取得し、コンテンツエディター内にYouTube動画を表示します。
更新」または「公開する」ボタンをクリックして投稿を保存すると、ライブ投稿に埋め込み動画が表示されるようになります。
簡単だったでしょう？
動画を追加した後、エディターで動画をクリックし、ポップアップツールバーから変更することで、その設定をカスタマイザーすることができます。
動画の幅を調整したり、アライメントを変更したりできます。また、キャプションを追加したり、モバイル端末で動画のアスペクト比を保持することもできます。
WordPressが自動埋め込みできるのは、ホワイトリストに登録されている動画サービスのみです。その他のサイトでは、埋め込みコードを取得し、ブログ投稿に貼り付ける必要があります。
WordPressの自動埋め込み用にホワイトリストされた動画サービスのリストです：
- アマゾン
- アニモト
- クラウドアップ
- カレッジ・ユーモア
- クラウドシグナル
- デイリーモーション
- Flickr
- フールー
- イムガー
- 発行
- キックスターター
- ミートアップ・ドット・コム
- ミックスクラウド
- レッドディット
- リバーブネーション
- スクリーンキャスト
- スクリブド
- スライドシェア
- スマッグ
- ソメカード
- サウンドクラウド
- スピーカーデッキ
- スポティファイ
- TED
- タンブラー
- ビデオプレス
- ヴィデオ
- WordPress.tv
- ユーチューブ
このリスト以外のサイトから動画を追加したい場合は、動画の完全なHTML埋め込みコードが必要です。
動画サイトから提供されたHTMLコードをコピー＆ペーストし、エディターの「HTML」ブロック内に貼り付けるだけです。
さらに詳しく知りたい方は、WordPressコードエディターでHTMLを編集する方法についての初心者ガイドをご覧ください。
方法2：古いクラシックエディターを使ってWordPressに動画を埋め込む
古いWordPressクラシックエディターを使用している場合は、同じ方法で動画を埋め込むことができます。
YouTubeなどの動画ホスティングサービスからURLをコピー＆ペーストしてエディターに貼り付けるだけです。ビジュアルエディターを使用している場合は、動画のプレビューが表示されます。
ただし、WordPressのGutenbergブロックエディターで使える幅調整などのオプションは使えません。
本当に〜してもよいですか？ ‘更新’または’公開’ボタンをクリックして、変更をライブにします。
方法3：WordPressのサイドバーウィジェットに動画を埋め込む方法
WordPressの投稿やページと同じように、WordPressのサイドバーウィジェットに動画を埋め込むこともできます。
WordPress管理エリアの外観 ” ウィジェットに移動し、「+」新規ブロック追加アイコンをクリックするだけです。
その後、検索バーで「動画」を検索する。
次に、追加したい動画のタイプのブロックをクリックします。例えば、YouTube、Vimeo、TEDなど。
次に、動画のURLをボックスに貼り付け、「Embed」ボタンをクリックすると、自動的にウィジェットエリアに追加されます。
その後、「更新」ボタンをクリックするだけで、WordPressサイトに動画ウィジェットが表示されます。
これで、サイトにアクセスして動画をライブで見ることができます。動画のサイズはウィジェットエリアのサイズに応じて自動的に拡大縮小されます。
さらに詳しく知りたい方は、WordPressでウィジェットを追加・使用する方法をご覧ください。
方法4：WordPressの動画埋め込みプラグインを使って動画を埋め込む
初期設定では、WordPressに動画を埋め込むためにプラグインを使用する必要はありません。しかし、サイトでの動画表示体験を向上させるためにプラグインを使用したい場合もあるでしょう。
WordPressのプラグインをいくつかご紹介します。
1.スマッシュバルーン YouTubeフィードプロ
Smash Balloon YouTube Feed Proは、40,000以上のサイトオーナーに信頼されているWordPress用の最高のYouTube動画ギャラリープラグインです。
私たちは自分のサイトで使用し、すべての機能をテストしました。詳しくはSmash Balloonのレビューをご覧ください。
カスタマイズ可能なギャラリー形式で、YouTubeチャンネルの動画をすべて自動的に埋め込むことができます。それは自動的に新しい動画をインポートし、フィードを組み合わせ、ライブストリーミング機能を追加し、YouTubeのプレイリストを埋め込むことができます。
さらに、表示、「いいね！」、シェア、コメント、リアクションも含まれ、ソーシャルプルーフを高めるのに役立ちます。
WordPressにYouTubeチャンネルのフィードを追加するために使用できるYouTubeフィードプラグインの無料版があります。
さらに詳しく知りたい方は、WordPressでYouTubeチャンネルの最新動画を表示する方法をご覧ください。
Smash Balloon YouTube Feedプラグインは、Facebook、Instagram、Twitter、YouTubeのすべてのソーシャルメディアコンテンツを個別WordPressページに統合するSocial Wallプラグインと併用することもできます。
2.Smash Balloon TikTokフィードプロ
Smash BalloonによるTikTokフィードProは、WordPressサイト上の任意の場所にTikTok動画を簡単に埋め込むことができる強力なプラグインです。
TikTokチャンネルに投稿すると、自動的にサイトにフィードされ、美しい動画ギャラリーフィードで表示されます。グリッド、カルーセル、リスト、メイソンリーなど、複数のフィードレイアウトから選択できます。
ドラッグ＆ドロップのフィードエディターでは、TikTokフィードのルックも完全にコントロールできます。表示する動画の数を設定したり、色、スタイル、間隔などをカスタマイザーできます。
さらに、単語やハッシュタグに基づいて動画をフィルターするための便利なモデレーションツールが付属しています。この機能を使えば、サイトのさまざまな部分にキュレーションされた動画フィードを作成し、特定のコンテンツをターゲットにすることができます。
WordPressにシンプルなTikTokフィードを追加するためのプラグイン「Feeds for TikTok」の無料版もあります。
詳しくはWordPressにTikTok動画を埋め込む方法をご覧ください。
3.Envira ギャラリー
Envira Galleryは市場で最高のWordPressギャラリープラグインです。私たちは美しいWordPressギャラリーを作成するためにいくつかのサイトで使用しています。詳しくはEnvira Galleryのレビューをご覧ください。
WordPressでフォトギャラリーを簡単に作成できます。また、美しくレスポンシブな動画ギャラリーを表示するための動画アドオンも付属しています。
YouTube、Vimeo、Twitch、DailyMotionなどの動画ギャラリーを作成できます。個人アカウントからYouTubeプレイリストを表示することもでき、特定のタイムスタンプでYouTube動画を開始する機能もあります。
Enviraの使い方はとても簡単。YouTube動画のURLを入力するだけで、スマートなシステムが自動的に動画のサムネイルを取得してくれます。
Envira Galleryには無料版があります。しかし、動画ギャラリー機能を利用するにはプレミアムプラグインが必要です。
4.YouTube購読者バー
YouTube Subscribe Barは WordPress に埋め込んだ YouTube 動画の下に YouTube 購読ボタンを表示します。また、YouTube の購読者数を取得することで、社会的な証拠を追加し、より多くのユーザーにチャンネルを購読してもらうことができます。
WPBeginnerのYouTubeチャンネルをこのサイトで宣伝するために最初に作成しました。多くのユーザーから、この方法を共有するよう求められたので、無料のプラグインとしてリリースすることにしました。
5.動画の遅延ロード
Lazy Load for Videosは、外部サイトからの動画埋め込みスクリプトの読み込みが、サイトのページ読み込み速度やパフォーマンスに影響を与える問題を解決します。
その代わり、ユーザーが再生ボタンをクリックしたときだけ、埋め込みコードを読み込みます。
ちなみに、Smash Balloon YouTube Feedプラグインを使用している場合は、動画プレーヤーのキャッシュと遅延読み込みがビルトインされているため、このプラグインは必要ありません。
動画チュートリアル
WordPressのブログ投稿に動画を簡単に埋め込む方法について、この投稿がお役に立てれば幸いです。WordPressで動画SEOを設定する方法についてのガイド、または専門家が選んだ最高の動画編集ソフトウェアもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Jiří Vaněk
Thanks for the block editor tutorial. I’ve been using Elementor until now and here’s a widget where you just put the URL of the video and it worked. But it’s good to know how it works in the block editor in case the website owner doesn’t want Elementor for some reason.
Pierre Gazzola
As my dementia stay the same I though I try again wordpress been away siince version 3.
However was smart enough to keep your page in my wp tab on chrome you help me so much all the time and remembering so much thank you.
From a old 70 25 at hearth :))
WPBeginner Support
Glad we can be helpful and we hope our guides continue to help you now and in the future!
管理者
sandeep
i have added YouTube video links in my WordPress blog post. now I want to remove that video link
so my question is after removing that links does it create any problem in that post indexing in google search console. because that video is appearing in video indexing page of google search console
WPBeginner Support
Unless we hear otherwise, removing a video link should not cause an issue with your post indexing.
管理者
Krystal
When I upload a video using the blocks wordpress tells me I must upgrade my account for $96/year. I’ve been using wordpress since 2012. What gives?
WPBeginner Support
If you’re being told to upgrade, you are using WordPress.com and running into a limitation. Our content is for WordPress.org. You can see the differences between the two in our article below:
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
管理者
Barry C Laminack
Hi, In case others may have the same problem I did with embedding a video from Rumble, after many trying many different things, I figured out how to do it by accident lol.
If it is your own video, use the Embed Code but only the link within the src= portion.
If it is not your video, using the “EMBED” button of the video, copy and use the “Embed IFRAME URL” link provided in the Embed pop dialog.
WPBeginner Support
Thanks for sharing that for users using that service
管理者
Dexter Rodrigues
Super stuff guys. I was struggling for 2 days with LearnDash LMS on WP and a premium European hosting provider. I used the method of Custom HTML embed and it worked just fine. It’s 3.00am in the morning where I am at and am smiling because of you :). Thanks a lot, this content is truly for a beginner like me with an erratic learning curve.
WPBeginner Support
Glad our guide was helpful
管理者
Imtiaz
I tried to upload videos from youtube, but it shows all related videos. I tried to put some restrictions also with functions like control=0, autoplay=1, ?rel=0, but none of these worked. I tried to upload videos from vimeo also, but there also related videos displayed.
Than I tired to upload videos directly from my pc, but that made my site slow.
Any suggestions how to use embeded vdeos of html from my pc.
WPBeginner Support
We do not have a recommended method for embedding a video from your home computer as a server at the moment.
管理者
monika
hi can i add food youtube videos on my wordpress food theme?……..i am serching for a food theme on wordpress that supports food videos.
thanks
WPBeginner Support
You can add videos to any WordPress theme, where you add it would determine how difficult it would be to achieve.
管理者
tuna
Thanks for the nice information…
I have a problem with url embed function in wordpress. When I add a url to embed a different post from my website ,everhting seems fine in preview mode. I mean I am seeing thumbnail and a excerpt of the post which is exactly what I want. But, when ı update the post there is only a simple link instead what is shown in preview mode. I need your help if possible.
Best Regards
WPBeginner Support
You would want to start by following our troubleshooting guide below:
https://www.wpbeginner.com/beginners-guide/beginners-guide-to-troubleshooting-wordpress-errors-step-by-step/
管理者
Samuel
I would like to have a website that is purely a Video Gallery but more like YouTube.
Do you think Plugins can do that?
Can you recommend some Plugins for me?
Thank you,
WPBeginner Support
That type of site would require more than only plugins, we would first recommend taking a look at our article below:
https://www.wpbeginner.com/beginners-guide/why-you-should-never-upload-a-video-to-wordpress/
管理者
Gaurav J
Hi. i am using embeds block to embed my YouTube video into the post. In the edit post window, I can see the video is getting embedded/I can see the preview of the video. But, once i publish the post or preview it, I could only see the link of the video and not the preview.
I am not using any plugins for embedding the videos.
Could you please help?
WPBeginner Support
You would want to start by ensuring you’re using the YouTube block. If you are then you may want to go through the troubleshooting steps in our article below:
https://www.wpbeginner.com/beginners-guide/beginners-guide-to-troubleshooting-wordpress-errors-step-by-step/
管理者
Liz
Hello,
i used to embed video on wordpress by simply past the link.
Now, Google search console detect that there are some problems in the two pages I have with video embed.
I’m talking about mobile usability.
Is there a way to fix this problem or a plugin that will fix it ?
WPBeginner Support
It would depend on how and where you added the videos from, using the YouTube embed as an example should not cause an issue unless you’re using an iframe embed that specifies width.
管理者
Luz Manalo-Cruz
I am unable to embed a YouTube video using the embed block editor (I tried both the embed block and the Youtube block). I’ve already tried pasting from the youtube studio link, from the URL in the address bar, and from the “share” button. Is there something I’m not doing right?
WPBeginner Support
You may want to try disabling your plugins to ensure this isn’t a possible conflict between one of your plugins and the embed.
管理者
JOy Halverson
I have a youtube video on my Wordpress ecommerce site – when the video ends I simply want it to end so that my customers aren’t curious to go see other videos. No “ads” for other youtube videos unrelated to my site- I seem to recall that there is some code you can put at the end of the video URL that will accomplish this. thanks
WPBeginner Support
YouTube does not offer that functionality at this time.
管理者
Naomi
Thank you for the information. May God bless you!
WPBeginner Support
You’re welcome, glad you like our content
管理者
HJK
Hi, I’ve used the embed code in the HTML editor then when I switch back to visual it appears, however when I try to preview the post the video does not show up at all.
WPBeginner Support
If it is only when trying to preview the post, you may want to try saving your draft beforehand to ensure that it is not due to the preview not being saved properly
管理者
Arpit
Really useful information. Can you please help me to know, if i add video on Wordpress post will effect on site speed or particular post speed.
WPBeginner Support
For our opinion on that, you would want to take a look at our article here: https://www.wpbeginner.com/beginners-guide/why-you-should-never-upload-a-video-to-wordpress/
管理者
Jason
“ll you need to do is paste the video URL into the WordPress editor.”
What a ie. Even putting the youtube link into the embed block doesn’t work. I wish Wordpress would stop giving incorrect directions. Nothing seems to work when it comes to putting a simple short youtube link (of my own 2 minute video into wordpress. WP? …. IDK about this.
WPBeginner Support
You may have a plugin or similar that could be preventing the embed from being added correctly, have you tried using the video block that was added with the Gutenberg/block editor?
管理者
Jeffrey Christian
I’m trying to embed a link from Vimeo but come up with the following error:
Sorry, this content could not be embedded.
There is no issue with the video, so not sure why there’s an error.
Any suggestions would be appreciated!
WPBeginner Support
If this method didn’t work, have you tried the video block to embed using that? If the error is in a Vimeo embed then the video owner may not allow embedding of the video.
管理者
Suzanne Dunaway
I cannot get this to work at ALL and I have a blog with 10,000 followers so far. Why won’t this work on my Wordpress editing page??????
WPBeginner Support
If you’re using the new block editor then there is an embed or a video block that you can use if that is the issue.
管理者
Gordana
I tried to embed url from yotube, it does work but copied video seems too large. I wanted smaller feature and I couldn’t get it smaller in no possible way. I tried same from Vimeo and was satisfied with the size. Do you have any similar experiences?
Ashley
I am pasting in the URL for our YouTube video and it does not auto embed. I did this exact process twice yesterday with no problems. Tried the embed code, logged out and logged back in but it still won’t auto embed.
Any ideas as to why this has suddenly stopped working?
David
Well what do you do when you you insert the URL, the image auto generates and then clips the rest of the paragraph instead of adjusting to fit?
Muhammad Junaid
I am using elementor to add youtube video.Secondly,does it violate copyright rule?
Civali
Please, how to set autoplay and sound off in video url?
Tyoaan Calistus
When I embed a YouTube code and add on my post, the button on click on and watch the video is usually not in the middle of the post.. How do I fix that pls?
Sejal
Hi..I copied the Youtube URL and it shows properly on the desktop version but doesnt show anything in the mobile version? Am I doing something wrong?
Suzanne Eutsler
I am embedding facebook live videos into our ministry website and am trying to figure out spacing issues. If you look at the link below, you’ll notice that underneath the video some of the text is cut off and when you look at it on an iphone you’ll notice there’s a TON of white space after each video.
HOW do I set it to be automatic that it just fits? Is there a way? I’d like it to show up correctly regardless of the pc or iphone or android etc.
HELP!!!! Please
WPBeginner Support
Hi Suzanne,
You will have to use Inspect Tool to find out CSS causing extra white space and adjust it by adding custom css.
管理者
Isaac
pls how can i post non-youtube videos on my wordpress page