There are so many websites explaining how to embed YouTube videos onto websites. But we want you to understand it fully from a to z. Because embedding videoclips can make your website way more interesting.
Its not difficult to embed a videoclip for a WordPress guru, but it can be a bit tricky if you aren’t used to it.
You have several options to implement YouTube clips onto your WordPress page. You can use plugins, but in this guide we guide you on how to get the videoclip that you want to have on your website from YouTube and then put it into the blogpost of WordPress. It is the easiest and fastest way to do it.
Embed a YouTube video into WordPress guide
First find the video you want to embed to your site. Its a nice idea to find a video that fits the topic of your site. We choose to use our own Distrita in a box video as example for this article. This example is for people that wants to have the video as it is or in full size on your WordPress page.
Step by step how to implement the embed code
- Right click on the videoclip
- Choose Copy embed code in the box
- Paste it in WordPress Editor when it is in Text mode! This code will appear: <iframe width=”797″ height=”448″ src=”https://www.youtube.com/embed/KkmBx0E2sCg” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
- Now you can change width from 797 to 1280 and height from 448 to 720
YouTube embed code highlighted in the Text mode
Nice advice!: Do not post the embed code from YouTube into the Visual editor of Classic Editor for WordPress. We also don’t recommend Gutenberg editor for WordPress that comes with the latest WordPress release at all as it is very slow and non-intuitive to use. Since the last WordPress release, Classic Editor which you find on the plugins page got over 1 million downloads.
We recommend you to always use the Text mode of the Classic Editor so you can adjust the size of the YouTube clip as you wish. Also a nice thing to know. Any standard or modern theme that is available for WordPress is Responsive. The video will adjust itself when using a tablet or mobile phone with a smaller screenmode.
How to align text with YouTube Embedded on a WordPress Post
Maybe you want the text to align around the YouTube clip that you post. You simply don’t want the embedded videoclip to only be visible but also have text flowing on either left or right side of the videoclip.
To get this text to be visible on the right side of the embedded YouTube videoclip then you can add div CSS code in front and at the end of the YouTube embedded code that you have embedded:
<div style=”float: left; margin-right: 20px;”><iframe src=”https://www.youtube.com/embed/KkmBx0E2sCg” width=”497″ height=”248″ frameborder=”0″ allowfullscreen=”allowfullscreen”><span data-mce-type=”bookmark” style=”display: inline-block; width: 0px; overflow: hidden; line-height: 0;” class=”mce_SELRES_start”></span><span data-mce-type=”bookmark” style=”display: inline-block; width: 0px; overflow: hidden; line-height: 0;” class=”mce_SELRES_start”></span></iframe></div>
You can change the float part to Right. You can also adjust margin-right to a higher or lower number.
Using a plugin for this task is not a good thing. Mostly because Google tend to change their code. We had the experience with testing YouTube embed plugins and once Google changed their code, the plugin stopped to work as it should. So we really recommend you to use this method to embed videoclips to your site. This method is also similar if you want to embed from DailyMotion or Vimeo video services on-line.
If you have any questions regarding WordPress. Send us mail to post at distrita dot com. We will answer when we can. Happy embedding videos from the WordPress Distrita team.
Source: Distrita Own Experience