HTML Youtube Videos Tutorial | Add & Play Youtube Videos in HTML

HTML Youtube Videos


How to Use iFrame

Now you know that iFrame is an additional element to share content from other sites. You can add it to give context about a certain topic to the readers. You can insert an iFrame element by using the <iframe> tag in an HTML document. Copy the code below and paste it to notepad, and save the file as .html format:

<iframe src="https://www.youtube.com/embed/dXBohfjc4WA" width="680" height="480" allowfullscreen></iframe>

The code above will display a YouTube tutorial video by Hostinger. Let’s examine each tag separately:

  • The <iframe></iframe> tag is used to contain the video within the iFrame.
  • The iFrame source (src) is the origin of the content from the external or internal server. Don’t forget to put the embedded code in the URL.
  • Width and height is the aspect ratio of the iFrame. You can insert a fixed sizes such as 680×480 pixels (px) as in the example. Or, you can use a percentage (10%-100%) based method to adjust the iFrame automatically.

Security Threats

By nature, the iFrame element does not pose any security risk for your web page or your readers. Partly, it was develope