How To Embed Responsive YouTube Video in WordPress Website
How To Embed Responsive YouTube Video in WordPress Website: Friends, let us tell you that if you embed a YouTube video in your blog or website by directly copying the HTML code from YouTube, then it is not a responsive video. If you watch it on PC or laptop, then the frame (size) of the video is correct. It will be visible but when you open your post in the mobile phone, you will see that the video which was visible in the correct size in the computer, will be cut in size in the mobile phone due to which even the thumbnail is not readable.
So in today’s article, we will tell you how to embed your YouTube video in your blog or website in a responsive manner with the help of HTML and CSS Code.
In today’s article, we will tell you how to embed responsive YouTube video in both blogger and WordPress website.
Best Process 2024: How To Embed Responsive YouTube Video in WordPress
How To Embed Responsive YouTube Video in WordPress: Friends, you can easily embed Responsive YouTube video in your WordPress website with the help of HTML Code and CSS Code.
Read This Also: How Create Free quiz questions For Blogger
Step-1 Add CSS Code in Your Website
.youtube-video {
aspect-ratio: 16 / 9;
width: 100%;
}- First of all you have to add this CSS code to your website.
- To add CSS code, click on the Customization option.
- Now click on the option ADD CSS CODE.
- Now copy this CSS CODE and paste it here.
- Now click on the save option.
Step- 2 Copy YouTube Video ID
- Now you have to copy the ID of the YouTube video which you want to embed in your blog post. To find the YouTube video ID, first copy the link of the YouTube video. Example: If the link of our video is https://youtu.be/CEIHV6GLMoY then the ID of the video will be CEIHV6GLMoY.
Step- 3 Copy HTML Code & Paste in Blog Post
- Now copy the HTML code given below and Paste the ID of your YouTube video in place of Paste YouTube Video ID.
<p style="text-align: center;"><iframe class="youtube-video" title="YouTube video player" src="https://www.youtube.com/embed/Paste YouTube Video ID" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>- Now paste this HTML code at the place where you want to embed your YouTube video in your blog post.
- Now your responsive YouTube video is embedded.
Important Link |
|
| Watch More Video of WordPress Website | Click Here |
| Watch More Video of Blogger Website | Click Here |