Responsive YouTube embed WordPress And, How to embed youtube videos to your WordPress?
A little harsh but reality. People tend to watch more than reading today. Digital storm lets say. However, videos only work as long as your content is knowledgeable or entertaining. To engage and reach out to more people. Many users are coming up with videos on their website. One such video content platform is Youtube. Well, doesn’t know about youtube. But, the point is more people wants to embed their youtube videos to their WordPress website.
You can embed your responsive YouTube videos on your site through plugins. Desktop and mobile functions differently. Therefore, plugins are needed to make your website appealing on both the platforms. Since most of the browsing is happening on phones. We need a way to so that we can embed videos which are highly responsive on both phones and desktop. Let us understand how can we achieve, Responsive YouTube embed WordPress.
Way to embed YouTube videos to WordPress site
First and the easiest way to embed YouTube video to WordPress site is very easy and effortless. You shall just copy and paste the link of the video you want to embed. This is one of the easiest and convenient way. Works pretty good on both Phones and Desktops. But, the limitation is. It only works well if the WordPress template you are using is responsive. The viewer can face issues like cropped video or browser turning to a desktop page.
However, you can use iframe because it gives you permission to resize videos. you can access player controls, enhance quality and security. A general copy and past of URL will not work here. For these settings to take place you need to do CSS coding without plugins.
Select iFrame
Share video you want to be embedded from YouTube site to open sharing option.
Select iFrame
From sharing section select Embedded.
Copy iFrame code
After that copy iFrame code of the video to be embedded.
Embedding codes
Within WordPress port where the videos are embedded.
like;
<div class=”responsive-youtube”><iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/464puoD09dM?controls=0″ frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
Create site wide CSS
From WP admin move to Appearance, then click customization. Move to Additional CSS option add the codes given to create class responsive YouTube.
LIKE,
.youtube-responsive-container {position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;}
.youtube-responsive-container iframe, .youtube-responsive-container object, .youtube-responsive-container embed {position:absolute;top:0;left:0;width:100%;height:100%;}
Click save and it is done.
Hope this article helped you all understand about Responsive YouTube embed WordPress, thank you for visiting us, keep reading and learning.
