How to Embed Video in Iframe in HTML?
Engaging content necessitates the embedding of videos in web pages. It is easy to do with HTML iframes. Here we will see how to select a video source, get the embed code, understand iframe attributes, and embed your video into HTML.
Approach
- The HTML document includes the basic structure with <html>, <head>, and <body> tags, defining the content of the webpage.
- An <iframe> element is used to embed a video from a video platform like YouTube. The src attribute of the <iframe> specifies the URL of the video to be embedded.
- The <iframe> element includes attributes such as width, height, src, allow, allow fullscreen, etc., to configure the appearance and behavior of the embedded video player, including autoplay, picture-in-picture mode, and fullscreen mode.
Syntax:
<iframe width="560" height="315" src="EMBEDDED_VIDEO_LINK" frameborder="0" allowfullscreen></iframe>
Example: The example below shows how to Embed Video in Iframe in HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Direct Embedding from
Video Platforms
</title>
</head>
<body>
<h2>Direct Embedding from Video Platforms Example</h2>
<!-- Embedding a YouTube video -->
<iframe width="560" height="315" src=
"https://www.youtube.com/embed/6ktny7tGepA?si=etAZWJvMlFADeRPH"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope;
picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen>
</iframe>
</body>
</html>
Output:
Output
Contact Us