Home
Blogger Guide
Coding Guide

How to add Advance Youtube Video Embed Iframe On Your Website Easily and Quickly

Hi Friends, let's see " How to Create Youtube Video Embed " on this Blog. YouTube videos can be embedded on your website by using this tool. Not only this, but youtube video also helps a little bit in the SEO of your website. And you Want LazyLoad Youtube Script Also Search on my Blog

Why didn't you know this? As of May 2015, YouTube had billions of users around the world who were watching, uploading, and sharing the first videos.

It is increasingly common for bloggers and website owners to create websites that can be accessed from multiple devices, including mobile phones, tablets, and computers.


The embed codes that YouTube provides for YouTube videos are the standard size of the video. Under the video drop-down option, it is possible to resize YouTube videos with the custom size option. YouTube videos are 315px wide and 560px tall by default.


YouTube videos, however, cannot be embedded on your responsive webpage to adapt to the user's screen size. Your website visitor's screen does not resize to fit the width and height of their device.


To ensure that your YouTube videos are responsive, you have to use some tricks. Embedding videos from YouTube and Vimeo into your websites is easy when you use CSS and HTML code.


In addition to responding to YouTube videos, the SWT video box features a thumbnail and play button in the middle. A blog post or a webpage can display an individual thumbnail for each video embedded in it.

How to Setup Youtube Video Embed Iframe?

Setup on Blogger

Go to the Blogger Dashboard and open the post where you want to add the YouTube video.

Next, Change Compose mode to Html mode on Your Post View

Next, Copy to where you wanted iframe Script On Below

After, Change your Youtube Video Id and the iframe

Next, paste the script you wanted a place on the blogger post

And Save the Changes And Publish The Post.

Your Youtube video is Ready to Play on Your Blogger Website.

Setup on Wordpress

Please log in to Your WordPress Dashboard and go to the post where you wanted to add a youtube video.

Next, click the Cursor on your want to add youtube video on the post

Now you can see the Plus icon and Press Plus Icon and select "Custom Html" Element

Now Copy to where you wanted iframe Script On Below

After, Change your Youtube Video Id and the iframe

Next, Paste the script on the "Custom Html " Field on your WordPress Post

Now, Your YouTube Video Is Ready to Play.

youtube video Embed Iframe - Youtube Officical 

<iframe width="560" height="315" src="https://www.youtube.com/embed/tQk9fs6IOag" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

How to Get this Script From Youtube?

  • Go to Official YouTube Website
  • Next, go to you wanted Youtube Video and Open youtube Video
  • Next, Click the Share Option below on your Youtube Video
  • Now you can see the popup Window
  • After hit the "Embed" button on the Popup window on Youtube.
  • now sees your embedded Script on display.
  • Copy the Script and paste your wanted Source.

youtube video Embed Iframe - Normal

<iframe width="420" height="315" 
 title="YouTube video player"
src="https://www.youtube.com/embed/tQk9fs6IOag">
</iframe>

This script is played youtube videos in the regular format.

Youtube Video Embed Iframe - Auto Play

<iframe width="420" height="315" 
 title="YouTube video player"
src="https://www.youtube.com/embed/tQk9fs6IOag?autoplay=1&mute=1">
</iframe>

This iframe is automatically played. Do not require to click the youtube video.

Youtube Video Embed Iframe - Loop

<iframe width="420" height="315"
 title="YouTube video player"
src="https://www.youtube.com/embed/tQk9fs6IOag?playlist=tgbNymZ7vqY&loop=1">
</iframe>

This iframe has automatically looped all videos on your targeted playlist.

Youtube Video Embed Iframe - Hide Controls

<iframe width="420" height="315"
 title="YouTube video player"
src="https://www.youtube.com/embed/tQk9fs6IOag?controls=0">
</iframe>

This iframe has hidden all controls on your youtube video

Do you want to Download this iframe HTML Script bundle? Please hit the Download Button below and Download the Script bundle on your Device.

Custom Modification

  • Do not forget to Change the Video id on all iframe Script
  • For Example, in this URL: https://www.youtube.com/watch?v=tQk9fs6IOag, tQk9fs6IOag is the video id.

Final Words:

We hope this youtube video embed script helps to add youtube videos to your websites. One more thing please follow my blog on Google News and subscribe to my youtube channel.

Post a Comment