動画はサイトに活気を与え、ユーザーのエンゲージメントを高める素晴らしい方法です。
幸いなことに、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.
Erin
Do I have to have WordPress premium to be able to do this?
Tom Minkler
What if a video is shared to Facebook from Instagram, THEN i try to put it in Wordpress post? For awhile, pasting the FB link into the visual editor was working fine, but now it just shows the link.
I don’t think those past videos that work were from Instagram, i went back and looked and one was shared from one Facebook page to another but the original doesn’t say it is from Instagram. Does it matter?
Thanks for your help.
Judy Mitchell
Perfect – thanks!
Alexander
thank you very much wpbeginner for this awsome post as usual it was so usefull
and i have another question my worpress site does not display properly on smartphones and android device what could be the problem ?
Riyaz Khan
Hi,
I want to develop a site where i am allowing users to upload the videos in their profile dynamically and same can be seen by other member, kind of facebook.
Is there any plugins for the same?
Kim
Hi WP Beginner!
First off my wordpress is a localhost. I’ve uploaded the video by adding media. (It shows up in my media library) However, when I put it in a post it starts by looking like it will play then goes black as says:
Media error: Format(s) not supported or source(s) not found
Then it gives a download link.
Is there anyway to just embed the video without giving a download link?
The video is an mp4.
Any help would be great! Thanks!
WPBeginner Support
Hi Kim,
Test your video in different browsers if it still shows error then your video file may not be encoded properly.
管理者
Hedi Putra
How to embed video on worpdress without iframe? can I use div code to embed?
Zeeshan Zafar
I have added Youtube Link in my site post but unfortunately it is not showing. I have tried many things to make it visible but no success. On load iframe load but there is nothing in the body tag of iframe.
Please Help….
JEG
I think in 4.9 you may need to add the link to the media library and then paste it from there
JEG
Sorry this is not correct. Instead I suggest you delete your post and create a new one. I was having a similar problem and that is how I fixed it.
Jennifer
I was able to embed my video from facebook live, and everything appears to be working perfectly EXCEPT there is no audio. What can I do?
Milliana
So how then do we use the embed code for ARCHIVE.ORG
WP will not let me use the Internet Archive iframe any more since it has updated.
This is a problem!
Do you have a work-around?
Thien Tam
I am using WP 4.9. and it is ok to embed audio and video from archive.org. just put the file between embed code. Like this: your video or audio link here
WPBeginner Support
Hi Thien,
Yes, it is ok to embed audio and video from archive.org.
管理者
Alex
This does not work in the category text. Is it possible also here?
ILIA
Hello! Is there a way to upload a Boomerang from my iPhone to a post on my WP blog?
Mac
Hello, I’m trying to include a video on my Wordpress post. I copy the URL (URL only, not the embed code) from my Vimeo link and paste it onto the Post Editor on its own line. It is not a hyperlink. After saving & updating the post, I go to look at the post and all I see is the text of the Vimeo url (no video). What am I doing wrong? FYI this is my own video on Vimeo; there are no privacy settings and it can be shared. Thanks.
WPBeginner Support
Hi Mac,
Try switching to a default theme and disable all plugins, see if this resolves your issue. You can also try this shortcode
1-click Use in WordPress
管理者
Vivek Darji
hello wpbegginer
how to increase Traffic on Photography site? without any content because my friend start a photography blog he was update only photos in blog how to improve that blog?
Guust
Just a note to anybody thinking of just adding videos to explain things rather than explaining with written words.
Videos with spoken explanations only are not accessible to hearing impaired people and might also be difficult for visitors to your site who do not speak the same language as the language used in the video.
And videos cannot be read by screen readers for the bling.
So make sure to add subtitles and also provide screen reader accessible content if you want or need your site to be accessible.
Cheers
Michelle
Hello,
I’ve just embed a youtube video on my wordpress site and it plays from that webpage on a desktop/leptop. However, when I access the webpage from my mobile device, when I play the video it opens it up in the Youtube app instead of staying on my website. I don’t want viewers to leave the webpage I’ve embed the video on while on mobile devices. Is there anyway to ensure viewers will not leave my site while on a mobile device and watching my video?
Hassin
is it possible that I could upload a video on my homepage. this is my wordpress blog
I want to change the video that is on the bottom of my page but I can’t change it, please help me. It is entered through Videopress
Paul Holmes
Hi Kathy,
I’m having problems with Vimeo embed codes. I have copied and pasted the Vimeo embed code onto my WEBSITE on the WORD PRESS Page but, when i click update and view changes all I see is the VIMEO Embed Code and not the VIDEO.
It isn’t showing the Video on my WORD PRESS Page just the EMBED CODE?
Look forward to your reply THAK YOU
Regards
Paul
WPBeginner Support
You can add a Vimeo video by simply entering the URL of the video page. No need to add embed code.
管理者
Kathy
I am having great difficulty getting a video to post on my WordPress blog. I’ve loaded it up to my youtube channel and then copy the URL from there. I paste into my NewPost, taking care to not have anything else on that same line. The video pops up in the edit box, but will not show on my blog when I come in from the outside, like any of you would do.
I’ve reviewed bunches of training sites that all say I am doing this correctly, and yet it won’t show. I called GoDaddy, since they are my blog host, but to no avail. They couldn’t help.
I even tried using the embed code and got the same results.
Does anyone have any suggestions?
Jeanne
Thank you for this video. Seems simple enough, but the video I want to embed in my Word Press template is from a news station’s website. It’s not on the white list and although you said we would have to use the embed code instead, you did not provide a link to how to use the embed code.
Cory
This was helpful, but I’m an idiot and need every single step spelled out for me…haha! What may be helpful for others looking for the solution, is more details on the link that you actually use on the wordpress page. It’s shown in the video but isn’t specifically explained. Don’t use the links that youtube gives you in the “share” option. Instead, copy and paste the actual url that is in your address bar of your browser.
Erin Tallman
Agreed. I’m looking for more advanced options, so this actually wasn’t very helpful
micheal smith
where can I find website to post embed look like this
Hazel Andrews
I’ve got the video embedded on my site. I’ve even set a thumbnail as a featured image! But on my blog page it shows both the thumbanil and the video when I just want the featured image to show up on the ‘recent posts’ bit. how do I do that?
Lyn
I did this and it worked but I noticed that the email that gets sent to my followers do not show the videos. They would have to click on my actual website in order to see the videos. Does anyone else have this problem and how do you fix that? thanks!
Kas Sommers
Did you ever get an answer to this? I have the same problem. The email sent to followers doesn’t even show a broken link, People have no way of even knowing there is a video there that they can’t see.
WPBeginner Support
Lyn and Kas, which plugin or service you are using to send out emails to your subscribers?
管理者
B. Noz Urbina
When I do Vimeo, the player doesn’t shrink to fit the div of my post, so it’s cropped one third of the player off the right hand side.
Clare
I tried the instructions here and it didn’t work.
I then tried what someone else suggested which is copying it elsewhere, into a document, and then copy and pasting that into wordpress – apparently that worked for others. Didn’t work for me.
I then simple copy and paste the basic URL into the post, no ‘embed’ business, and voila!
Hopefully, it does actually work properly, so far so good
Bruce Fulford
I have successfully embedded two videos from YouTube but views on WP are not reported in my YouTube stats. Do you know why?
Jakarri Demery
make sure you embed the video and not copy and past the link from the platform you are using
Surangika Senanayake
my insert/edit video icon doesn’t work. Can somebody help me please?
Masauko
Thanks for the post. It just worked after I had tried several plugins but failed. But the thumnail is too large for my theme. The video therefore distorts homepage appearence. How can I minimise the size of the thumnail
SarahZigler
confused!
dave
Whoa. I thought there would be more to it!
It works! Just like that.
Thanks a lot.
Cathal
the link for the youtube video does not work!
Anyway, its ironic that you are showing how to embed a video, and the video you show is only a link, not an embedded video???
WPBeginner Support
The link does not work, because it is not a valid link. It is an example of how to paste a link in a post to embed a youtube video. If you are interested in our YouTube videos please check out our YouTube Channel.
管理者
Sutherland Boswell
Simple is better and this is as simple as it gets. I love oEmbed!
James
If you could instruct me in English perhaps I may understand. How do I know whether it is hyperlinked or not?
WPBeginner Support
The videos you embed on your site are not exactly hyperlinked. Instead, they are opened from youtube with in an iframe on your site.
管理者
POed
Not worth a damn. How about people that don’t want to be a youtube whore?
Editorial Staff
You can use Vimeo, or one of the many other platforms that WordPress has built-in oEmbed support.
http://codex.wordpress.org/Embeds#Okay.2C_So_What_Sites_Can_I_Embed_From.3F
管理者
Kristy
Thank you. Worked like a charm
Kristina Goodrich
Okay, I did as you said and, even though I couldn’t see anything more than a yellow box, it was there. How about that.
Thank you!
Victoria
Thank you very much for this post. I have tried embedding them I don’t know how many ways, then find this. Oh Duh! lol
Jimmy
“Well you can, but we do not recommend you to do so.”
So, how do you do it then? I’ll decide if I want to host it from my own site or not. I have a password protected site with only a few users. I do not want to make my video public. Hosting a 30 second clip is not going to crash the server.
Editorial Staff
If you have a handful of users and a short clip, sure go ahead and host it on your server. We would recommend going with Vimeo. Their plus feature which costs like $60 per year allows you to limit video embeds to a certain domain name. You can make it yoursite.com, and then have your site members only.
管理者
Karen Berry
I consistently can’t embed videos on our blogs unless they are posted on YouTube. I am trying to embed a video from a public television station that provides embed code. Pasting the url does not work, using the embed code does not work. I tried pasting both into Notepad before pasting as a commeter above sugggested and that is not working. I have checked my settings to make sure auto-embed is enabled. Any other ideas?
Editorial Staff
If these public televisions are not using a popular service like Youtube, Vimeo, etc, then just pasting their URLs wouldn’t work. You would have to use their embed code. If it is iFrame embed code, then you should probably download one of the iframe plugins. If it is a Flash Player code, then you should be able to paste the code in your HTML tab of post editor. It should work just fine.
管理者
gyllencrazy
I’m trying to embed videos manually (unfortunately all the videos I want to post in my blog are not among the easy-to-embed ones that you’ve listed) but it doesn’t work.
If I copy and paste the link in the HTML page, it doesn’t do anything in the VISUAL page. What am I doing wrong? I’m downloading these videos and uploading them on my dailymotion page to avoid this problem but it’s time consuming and I really would like to just embed.
Any ideas?
Editorial Staff
If your embed is iFrame based, then use one of the iFrame plugins.
管理者
GYLLENCRAZY
Iframe based videos don’t work either, not even with the iFrame plugin. Flashplayer code videos don’t work.
I’m considering migrating somewhere else, it takes less time than trying to figure how to do something that’s supposed to be easy, according to what WP support keeps telling us.
Marie
We’re using Wordpress on our own server. Seems like it doesn’t do anything right. When I paste the url into the body, I leave a space above and a space below it. Nothing happens. My url is from a YouTube video that is public! I think it may have something to do with my lines disappearing between paragraphs. They are there when I’m editing but in the preview they are gone. Any know of a fix for that? Keep in mind I don’t really know code, so hopefully a fix that doesn’t involve messing with it.
Editorial Staff
First go to Settings > Media and make sure that auto-embeds are checked. If it is and it is still not working, then it could be a formatting error.
管理者
Kristina Goodrich
i have a similar problem. I go to Settings > Media, and the only thing it asks is the size limits for small, medium and large images. There is no mention of auto-embedding, there or elsewhere.
Is the problem that I’m trying to embed .mov files? It doesn’t seem to make a difference if I select Flash (which I used in the past) or QuickTime as a choice under the “embed media” shortcuts.
Help!
Niña Angeli
Hi Kristina!
I know I’m writing this a year and a half after you posted the above, but I’m having exactly the same youtube embed problems (no auto embedding option, etc)
Did you ever figure out the problem? If so, please let me know…I’m starting to get frustrated!
Thanks!
Niña
Hobi Burung Kicau
I Think this simple way for embed video, thanks for sharing
nilam.r.patel
That’s really easy and nice….Thanks
D. West Davies
My embedded videos disappear when I go back to a post to edit. Is there a plug-in that prevent this?
Matt F
Doesn’t work for my when I do a straight cut and paste. I have to paste into Notepad, then recopy/pasted into Wordpress. Why? Who knows. One of the myriad of foibles of Wordpress that should be easy but are ball-tearingly frustrating.
Raven
Incredible! This really works. I spent hours trying to find a simple way to do this. Thanks a bunch.
izoel
but why there’s no sample how to embeded youtube or etc in here? is it me, or there is no video that shows up in here ?
Editorial Staff
No sample, because what is the point of showing the video showing up? All you have to do is paste the video URL.
管理者
Courtney Engle
Will embedding the video this way display properly in Google Reader?
And if the RSS is importing to Facebook notes, would additionally hyperlinking the code used to put the video in then break the embed that WP can do?
Editorial Staff
We always embed our videos this way, and haven’t had any issues from users complaining about misalignment or broken posts in google reader. If RSS is being served to Facebook, it would work perfectly fine, because WordPress is generating your RSS and it knows what to do with an embed code.
管理者
Nick Tart
Wow, I had no idea! I’ll have to try this out. Thanks, WPB.