{"id":12033,"date":"2026-02-23T12:35:22","date_gmt":"2026-02-23T12:35:22","guid":{"rendered":"https:\/\/www.vdocipher.com\/blog\/?p=12033"},"modified":"2026-02-24T10:59:23","modified_gmt":"2026-02-24T10:59:23","slug":"embed-video-html-using-iframe-video-tag-element","status":"publish","type":"post","link":"https:\/\/www-uat.vdocipher.com\/blog\/how-to-embed-video-in-html\/","title":{"rendered":"How to Embed Video in HTML Using iframe or Video Tag Element"},"content":{"rendered":"<p>Embedding a video file in an HTML document allows the video playback directly in the web browser without needing a separate video player application. HTML video embedding is also important because it will enable videos to be played on mobile devices that do not have a dedicated video player application. For example, many smartphones and tablets do not have a <a href=\"https:\/\/www.vdocipher.com\/blog\/javascript-video-player\/\">JavaScript video player<\/a> application installed, but they can still play video files embedded in an HTML document. Additionally, HTML video embedding can be used to create a video gallery, where multiple videos can be displayed on a single page. An embed code is a chunk of HTML allowing you to embed content from one website into another. Most commonly, embed codes are used to embed video in HTML from video-sharing sites like YouTube. Embed codes are important because they allow you to embed content on your website without hosting it on the same server. This can save you a lot of bandwidth and storage space and prevent you from having to deal with copyright issues.<\/p>\n<div class=\"border-box\" style=\"border: 1px solid;\">\n<p><strong>Table Of Contents<\/strong>:<\/p>\n<ul>\n<li><a style=\"color: #069; text-decoration: none;\" href=\"#VideoTag\">Embed Video in HTML using &lt; Video &gt; tag<\/a>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li><a style=\"color: #069; text-decoration: none;\" href=\"#embedvideoplayer\">How to Embed Video Player in HTML<\/a><\/li>\n<li><a style=\"color: #069; text-decoration: none;\" href=\"#VideoAttributes\">Attributes of video element for embedding in HTML<\/a><\/li>\n<li><a style=\"color: #069; text-decoration: none;\" href=\"#Other\">Other Attributes<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li><a style=\"color: #069; text-decoration: none;\" href=\"#IframeTag\">Embed Video in HTML using &lt; iframe &gt; tag<\/a>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li><a style=\"color: #069; text-decoration: none;\" href=\"#How\">How an iframe loads a video element?<\/a><\/li>\n<li><a style=\"color: #069; text-decoration: none;\" href=\"#IframeAttributes\">Attributes of iframe element for Video embed in HTML<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li><a style=\"color: #069; text-decoration: none;\" href=\"#choice\">iframe vs video Tag: Which One Should You Use?<\/a><\/li>\n<li><a style=\"color: #069; text-decoration: none;\" href=\"#Responsive\">Responsive Video Embedding in HTML5<\/a><\/li>\n<li><a style=\"color: #069; text-decoration: none;\" href=\"#ResponsiveIframe\">Responsive iframe Embedding in HTML5<\/a><\/li>\n<li><a style=\"color: #069; text-decoration: none;\" href=\"#desktop\">Desktop Browser Compatibility of Video Elements and Attributes<\/a><\/li>\n<li><a style=\"color: #069; text-decoration: none;\" href=\"#mobile\">Mobile Browser Compatibility of Video Elements and Attributes<\/a><\/li>\n<li><a style=\"color: #069; text-decoration: none;\" href=\"#Security\">How to securely Embed Videos preventing illegal downloads<\/a><\/li>\n<li><a style=\"color: #069; text-decoration: none;\" href=\"#faq\">FAQs<\/a><\/li>\n<\/ul>\n<\/div>\n<p>In this article, we will discuss major methods of embedding video files in an HTML document. The methods are easy enough, and most often, they require copying and pasting of an HTML string. These strings are available through your sharing snippet that either contains a video tag or an iframe tag. We will discuss about both methods of using a video tag and an iframe tag with their features and attributes.<\/p>\n<h2 id=\"VideoTag\" style=\"padding-top: 50px; margin-top: -50px;\">Embed Video in HTML Using &lt;Video&gt; tag<\/h2>\n<p>The &lt; video &gt; embed element in HTML is used to embed a video file into an HTML document. The HTML video element shows a video on a web page without the requirement of Flash Player, like additional plugins. After implementing HTML5, embedding videos to a web page became as easy as adding an image. Although the data in the video element is supposed to be video, you can also add images and audio. The content is written in between the opening &lt; video &gt; and closing &lt; \/video &gt; tags.<\/p>\n<div class=\"video-try-editor\">\n<div class=\"video-editor-inner\">\n<h2>Try it Yourself<\/h2>\n<p>HTML Demo using &lt; video &gt; tag<\/p>\n<p><textarea id=\"video-code-editor\" class=\"video-try-editor-editor\"><\/textarea><br \/>\n<button class=\"video-try-editor-run-btn\">Run code snippet<\/button><br \/>\n<iframe class=\"video-try-editor-preview\" id=\"video-output-preview\"><\/iframe><\/p>\n<\/div>\n<\/div>\n<p>Web browsers commonly supported video formats are mp4, WebM and Ogg. The &lt; video &gt; tag contains &lt; source &gt; tags that contain different video sources. The browser picks the one it supports. For example, different video sizes for iPad and retina displays can be provided with different source URLs. This can be seen in the below code snippet:<\/p>\n<p><strong>Syntax:<\/strong><\/p>\n<pre>&lt; video src=\"video.webm\" type=\u201dvideo\/webm\u201d controls &gt;\r\n&lt; \/video &gt;<\/pre>\n<p>Or<\/p>\n<pre>&lt; video controls &gt;\r\n&lt; source src=\"movie.mp4\" type=\"video\/mp4\" &gt;\r\n&lt; source src=\"movie.ogg\" type=\"video\/ogg\" &gt;\r\n&lt; \/video &gt;<\/pre>\n<p><em>Note: &lt; source &gt; tag is an empty tag. There is no need to close it except in the case of XHTML.<\/em><\/p>\n<h3 id=\"embedvideoplayer\">How to Embed Video Player in HTML<\/h3>\n<p>Embedding a video player in HTML is straightforward. Here\u2019s a step-by-step guide:<\/p>\n<p><a href=\"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2025\/06\/video-embed-1-scaled.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21332 size-full\" src=\"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2025\/06\/video-embed-1-scaled.png\" alt=\"embed video in html\" width=\"2560\" height=\"1429\" srcset=\"https:\/\/www-uat.vdocipher.com\/blog\/wp-content\/uploads\/2025\/06\/video-embed-1-scaled.png 2560w, https:\/\/www-uat.vdocipher.com\/blog\/wp-content\/uploads\/2025\/06\/video-embed-1-300x167.png 300w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/a><\/p>\n<p><strong>1. Choose Your Video Player:<\/strong><br \/>\nSelect a video player that fits your needs. Some popular options include VdoCipher, Video.js, JW Player, and HTML5&#8217;s native &lt;video&gt; tag. Each of these offers different features, so consider what\u2019s important for your content.<\/p>\n<p><strong>2. Embed Video Player:<\/strong><br \/>\nOnce you\u2019ve chosen your video player, you can embed it using simple HTML code. For instance, if you\u2019re using the native HTML5 &lt;video&gt; tag, the code would look like this:<\/p>\n<pre>&lt;video width=\"640\" height=\"360\" controls&gt;\r\n&lt;source src=\"your-video-file.mp4\" type=\"video\/mp4\"&gt;\r\nYour browser does not support the video tag.\r\n&lt;\/video&gt;<\/pre>\n<p><strong>3. Customize the Player:<\/strong><br \/>\nCustomize the player according to your website\u2019s design. You can modify dimensions, add autoplay, loop functionality, and adjust controls based on your audience&#8217;s needs.<\/p>\n<p><strong>4. Test Across Devices:<\/strong><br \/>\nEnsure that the embedded video player works smoothly across different devices and browsers. This step is crucial to providing a consistent user experience.<\/p>\n<table>\n<tbody>\n<tr>\n<td><b>Browser<\/b><\/td>\n<td><b>MP4<\/b><\/td>\n<td><b>WebM<\/b><\/td>\n<td><b>OGG<\/b><\/td>\n<\/tr>\n<tr>\n<td>Google Chrome<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td>Firefox<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td>Opera<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td>Safari<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td>Edge<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<td>Yes<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3 id=\"VideoAttributes\" style=\"padding-top: 50px; margin-top: -50px;\">Attributes of video element for embedding in HTML<\/h3>\n<p><a href=\"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2025\/06\/html-video-attributes-1-scaled.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-21336\" src=\"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2025\/06\/html-video-attributes-1-scaled.png\" alt=\"html video atrribute\" width=\"2560\" height=\"1429\" srcset=\"https:\/\/www-uat.vdocipher.com\/blog\/wp-content\/uploads\/2025\/06\/html-video-attributes-1-scaled.png 2560w, https:\/\/www-uat.vdocipher.com\/blog\/wp-content\/uploads\/2025\/06\/html-video-attributes-1-300x167.png 300w, https:\/\/www-uat.vdocipher.com\/blog\/wp-content\/uploads\/2025\/06\/html-video-attributes-1-1024x572.png 1024w, https:\/\/www-uat.vdocipher.com\/blog\/wp-content\/uploads\/2025\/06\/html-video-attributes-1-768x429.png 768w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/a><\/p>\n<p><strong>controls<\/strong> &#8211; The controls attribute displays player controls supported by browsers. If this attribute is not used, the player won&#8217;t display any controls, not even pause and play. If specified, the browse will offer <a href=\"https:\/\/www.vdocipher.com\/blog\/html-video-controls-and-elements\/\">video controls<\/a> to the user, such as volume, play, pause, resume playback and more.<\/p>\n<p><strong>autoplay<\/strong> &#8211; A boolean expression, when specified, automatically starts the video as soon as the data has finished loading.<\/p>\n<p>The automatic video playback (mostly with an audio track) when a visitor visits a website is not liked by many and is often considered a bad user experience. Some browsers like Chrome70.0 allow autoplay only when the muted attribute is present.<\/p>\n<p>To autoplay a video with muted audio, add \u2018muted\u2019 after \u2018autoplay\u2019.<\/p>\n<pre>&lt; video width=\"340\" height=\"260\" autoplay muted &gt;<\/pre>\n<p><strong>src<\/strong> &#8211; This attribute gets used to specify the source URL of the video. It specifies the URL or video file location to embed.<\/p>\n<p><strong>preload<\/strong> &#8211; This attribute gives the author the freedom to hint to the browser whether to download the video or the metadata or not to load the video when the page loads the first time. The attribute allows 3 values to pass:<\/p>\n<ul>\n<li>none &#8211; The video will not be preloaded. The video content part of the page will be displayed as a blank region on the screen.<\/li>\n<li>metadata &#8211; Only the video metadata (height, width, duration etc) is fetched before the user starts video playback<\/li>\n<li>auto &#8211; The entire video is downloaded irrespective of user interest. The auto request can be ignored by the browser.<\/li>\n<\/ul>\n<p><em>Note: The autoplay attribute can override the preload. The preload attribute is just a hint for the browser.\u00a0<\/em><\/p>\n<p><strong>loop<\/strong> &#8211; A boolean expression, when specified, plays the video again once the playback has come to end.<\/p>\n<p><strong>height<\/strong> &#8211; Sets the video display area height.<\/p>\n<p><strong>width<\/strong> &#8211; Sets the video display area width.<\/p>\n<p><strong>muted<\/strong> &#8211; A boolean attribute to initially mute the audio in a video. If set to \u2018false\u2019, the audio will play when the video starts.<\/p>\n<p><strong>poster<\/strong> &#8211; A preview image that is shown when the video is loading or until the time user hits the play button. If the attribute is not specified, nothing is displayed till the time the first video frame is available. The first frame then becomes the poster frame.<\/p>\n<h3 id=\"VideoAttributes\" style=\"padding-top: 50px; margin-top: -50px;\">Additional Elements or Tags used within Video Element<\/h3>\n<p>There are two elements or tags which get mainly used within &lt; video &gt; tag namely, \u201csource\u201d and \u201ctrack\u201d.<\/p>\n<p><strong>&lt; source &gt;<\/strong> &#8211; If you are not using the \u2018src\u2019 attribute of the video tag or have multiple video sources, then you need to use the &lt; source &gt; tag with its \u2018src\u2019 attribute to specify the source URL. The additional benefit a &lt; source &gt; tag provides is of having different source URLs for different display sizes and video types.<\/p>\n<p>The browser will choose the first source it supports.<\/p>\n<pre>&lt; video controls &gt;\r\n&lt; source src=\"movie-1080p.mp4\" type=\"video\/mp4\" &gt;\r\n&lt; source src=\"movie-480p.mp4\" type=\"video\/mp4\" &gt;\r\n&lt; \/video &gt;<\/pre>\n<h4 data-start=\"181\" data-end=\"209\">How the browser decides:<\/h4>\n<ol data-start=\"211\" data-end=\"848\">\n<li data-start=\"211\" data-end=\"324\">\n<p data-start=\"214\" data-end=\"324\"><strong data-start=\"214\" data-end=\"241\">Reads sources top-down:<\/strong> The browser starts at the top of the <code data-start=\"279\" data-end=\"289\">&lt;source&gt;<\/code> list and checks each one in order.<\/p>\n<\/li>\n<li data-start=\"326\" data-end=\"640\">\n<p data-start=\"329\" data-end=\"364\"><strong data-start=\"329\" data-end=\"364\">Evaluates the <code data-start=\"345\" data-end=\"351\">type<\/code> attribute:<\/strong><\/p>\n<ul data-start=\"368\" data-end=\"640\">\n<li data-start=\"368\" data-end=\"500\">\n<p data-start=\"370\" data-end=\"500\">It uses the <code data-start=\"382\" data-end=\"388\">type<\/code> value (like <code data-start=\"401\" data-end=\"413\">video\/webm<\/code>, <code data-start=\"415\" data-end=\"426\">video\/mp4<\/code>, <code data-start=\"428\" data-end=\"439\">video\/mkv<\/code>) to <strong data-start=\"444\" data-end=\"499\">decide whether it supports that container and codec<\/strong>.<\/p>\n<\/li>\n<li data-start=\"504\" data-end=\"640\">\n<p data-start=\"506\" data-end=\"640\">If it recognizes and supports the combination of container + codec (based on its media capabilities), it attempts to load that source.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li data-start=\"642\" data-end=\"848\">\n<p data-start=\"645\" data-end=\"670\"><strong data-start=\"645\" data-end=\"670\">Stops at first match:<\/strong><\/p>\n<ul data-start=\"674\" data-end=\"848\">\n<li data-start=\"674\" data-end=\"746\">\n<p data-start=\"676\" data-end=\"746\">As soon as it finds a source it can play, it <strong data-start=\"721\" data-end=\"745\">ignores all the rest<\/strong>.<\/p>\n<\/li>\n<li data-start=\"750\" data-end=\"848\">\n<p data-start=\"752\" data-end=\"848\">If none are supported, it shows the fallback text (&#8220;Your browser does not support HTML5 video&#8221;).<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p><em><strong>Note: <\/strong>type attribute specifies one of the three supported video format types. Similar to the &#8216;src&#8217; attribute, this attribute is to be specified with the &lt; source &gt; tag and have multiple types.<\/em><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>Video Format<\/b><\/td>\n<td><b>Type value<\/b><\/td>\n<\/tr>\n<tr>\n<td>MP4<\/td>\n<td>video\/mp4<\/td>\n<\/tr>\n<tr>\n<td>WebM<\/td>\n<td>video\/webm<\/td>\n<\/tr>\n<tr>\n<td>Ogg<\/td>\n<td>video\/ogg<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>&lt; track &gt;<\/strong> -this tag specifies text tracks for &lt;audio&gt; or &lt;video&gt; elements. This element is used to specify subtitles, caption files or other files containing text, that should be visible when the media is playing. Tracks are formatted in WebVTT format (.vtt files).<\/p>\n<pre>&lt;video width=\"320\" height=\"240\" controls&gt;\r\n&lt; source src=\"movie-1080p.mp4\" type=\"video\/mp4\" &gt;\r\n&lt; source src=\"movie-480p.mp4\" type=\"video\/mp4\" &gt; \r\n&lt;track src=\"fgsubtitles_en.vtt\" kind=\"subtitles\" srclang=\"en\" label=\"English\"&gt;\r\n&lt;track src=\"fgsubtitles_no.vtt\" kind=\"subtitles\" srclang=\"no\" label=\"Norwegian\"&gt;\r\n&lt;\/video&gt;<\/pre>\n<p><strong>Optional Attributes under track element<\/strong><\/p>\n<table>\n<tbody>\n<tr>\n<th style=\"text-align: left;\"><strong>Attribute<\/strong><\/th>\n<th style=\"text-align: left;\"><strong>Value<\/strong><\/th>\n<th style=\"text-align: left;\"><strong>Description<\/strong><\/th>\n<\/tr>\n<tr>\n<td>default<\/td>\n<td>default<\/td>\n<td>Specifies that the track is to be enabled if the user&#8217;s preferences do not indicate that another track would be more appropriate. For example &#8211; &lt;track src=&#8221;subtitles_en.vtt&#8221; default&gt;<\/td>\n<\/tr>\n<tr>\n<td>kind<\/td>\n<td>captions<br \/>\nchapters<br \/>\ndescriptions<br \/>\nmetadata<br \/>\nsubtitles<\/td>\n<td>Specifies the kind of text track<\/td>\n<\/tr>\n<tr>\n<td>label<\/td>\n<td><em>text<\/em><\/td>\n<td>Specifies the title of the text track<\/td>\n<\/tr>\n<tr>\n<td>src<\/td>\n<td><em>URL<\/em><\/td>\n<td>Required. Specifies the URL of the track file<\/td>\n<\/tr>\n<tr>\n<td>srclang<\/td>\n<td><i>language_code<\/i><\/td>\n<td>Specifies the language of the track text data (required if kind=&#8221;subtitles&#8221;)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 id=\"IframeTag\" style=\"padding-top: 50px; margin-top: -50px;\">Embed Video in HTML Using &lt;iframe&gt; tag<\/h2>\n<p>The &lt;iframe&gt; HMTL element specifies an inline frame containing independent HTML. With this frame, you can embed another HTML page or external URL into the current page (parent page). Commonly it is used to embed videos, external ads, maps and other media. You can even use iframe to <a href=\"https:\/\/www.vdocipher.com\/blog\/embed-videos-in-wordpress\/\">embed videos in wordpress<\/a>.<\/p>\n<div class=\"video-try-editor\">\n<div class=\"video-editor-inner\">\n<h2>Try it Yourself<\/h2>\n<p>HTML Demo using &lt; iframe &gt; tag<\/p>\n<p><textarea id=\"video-code-editor-iframe\" class=\"video-try-editor-editor-iframe\"><\/textarea><br \/>\n<button class=\"video-try-editor-run-btn-iframe\">Run code snippet<\/button><br \/>\n<iframe class=\"video-try-editor-preview-iframe\" id=\"video-output-preview-iframe\"><\/iframe><\/p>\n<\/div>\n<\/div>\n<p>The content is referenced in the \u2018src\u2019 attribute of each element, which makes it a completely independent resource in reference to the current document.<\/p>\n<p>The embedded document or Video behaves like it is a part of the current page, and you can interact with it. The HTML document may have separate CSS or JavaScript, which is refreshed and loaded separately from the parent site whenever the web browser parses the iframe tag.<\/p>\n<p>Here is an example of a YouTube video embed code using an iframe element. The &lt;iframe&gt; tag below would load a 560x315px player, which will play the YouTube video id \u2018M7lc1UVf-VE\u2019. The below embed code from YouTube also uses the \u2018allow\u2019 parameter to specify multiple features like autoplay, picture-in-picture, etc.<\/p>\n<div class=\"outer-cta\">\n<div class=\"inner-cta\">\n<p class=\"cta-emoji-line\">Customizable \u25b6\ufe0f<\/p>\n<p><a class=\"cta-short-line\" href=\"https:\/\/www.vdocipher.com\/page\/custom-video-player\/?utm_source=blog&amp;utm_medium=text-cta&amp;utm_campaign=player\">Personalize Your Video Player as per Custom Needs<\/a><\/p>\n<\/div>\n<div class=\"inner-cta\">\n<p><a href=\"https:\/\/www.vdocipher.com\/page\/custom-video-player\/?utm_source=blog&amp;utm_medium=text-cta&amp;utm_campaign=player\"><img decoding=\"async\" class=\"img-cta-features\" src=\"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-22-at-6.46.08-PM.png\" alt=\"VdoCipher custom HTML5 video player\" width=\"125px\" \/><\/a><\/p>\n<p style=\"font-size: 16px !important; font-weight: 400; margin: 0!important; padding: 0 1rem 1rem 1rem!important;\">Complete control to personalize your online video player, catering to your brand and specific requirements. You can easily change the color, design, and player controls, including adaptive playback, video speed change, and multi-language subtitles.<\/p>\n<\/div>\n<\/div>\n<pre>&lt;iframe width=\"560\" height=\"315\" loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/M7lc1UVf-VE\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen&gt;&lt;\/iframe&gt;<\/pre>\n<h3 id=\"How\" style=\"padding-top: 50px; margin-top: -50px;\">How an iframe loads a video element?<\/h3>\n<p>Once an &lt; iframe &gt; element is placed with a \u2018src\u2019 attribute, it will start loading the HTML content of the source URL. The HTML content will load with a &lt; video &gt; element containing the source or blob URL of the video. For example, the above YouTube iframe embed code will eventually unfold to,<\/p>\n<pre>&lt; html &gt;\r\n&lt; head &gt;&lt; \/head &gt;\r\n&lt; body &gt;\r\n\u2026\u2026 &lt; video &gt;.....&lt; \/video &gt;\r\n&lt; \/body &gt;\r\n&lt; \/html &gt;<\/pre>\n<p><a href=\"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2022\/09\/iframe-element-containing-video-element.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12048\" src=\"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2022\/09\/iframe-element-containing-video-element.png\" alt=\"iframe element containing video element\" width=\"1170\" height=\"944\" srcset=\"https:\/\/www-uat.vdocipher.com\/blog\/wp-content\/uploads\/2022\/09\/iframe-element-containing-video-element.png 1170w, https:\/\/www-uat.vdocipher.com\/blog\/wp-content\/uploads\/2022\/09\/iframe-element-containing-video-element-300x242.png 300w, https:\/\/www-uat.vdocipher.com\/blog\/wp-content\/uploads\/2022\/09\/iframe-element-containing-video-element-1024x826.png 1024w, https:\/\/www-uat.vdocipher.com\/blog\/wp-content\/uploads\/2022\/09\/iframe-element-containing-video-element-768x620.png 768w, https:\/\/www-uat.vdocipher.com\/blog\/wp-content\/uploads\/2022\/09\/iframe-element-containing-video-element-150x121.png 150w\" sizes=\"auto, (max-width: 1170px) 100vw, 1170px\" \/><\/a><\/p>\n<h3 id=\"IframeAttributes\" style=\"padding-top: 50px; margin-top: -50px;\">Attributes of iframe element for Video embed in HTML<\/h3>\n<p><strong>allow<\/strong> &#8211; specifies the feature policy of the &lt;iframe&gt;. The policy is used to define features available to the &lt;iframe&gt; based on the request origin. The allow attribute values are the following features which can be used as per need.<\/p>\n<ul>\n<li>accelerometer<\/li>\n<li>ambient-light-sensor<\/li>\n<li>autoplay<\/li>\n<li>battery<\/li>\n<li>camera<\/li>\n<li>display-capture<\/li>\n<li>document-domain<\/li>\n<li>encrypted-media<\/li>\n<li>execution-while-not-rendered<\/li>\n<li>execution-while-out-of-viewport<\/li>\n<li>fullscreen<\/li>\n<li>gamepad<\/li>\n<li>geolocation<\/li>\n<li>gyroscope<\/li>\n<li>layout-animations<\/li>\n<li>legacy-image-formats<\/li>\n<li>magnetometer<\/li>\n<li>microphone<\/li>\n<li>midi<\/li>\n<li>navigation-override<\/li>\n<li>oversized-images<\/li>\n<li>payment<\/li>\n<li>picture-in-picture<\/li>\n<li>publickey-credentials-get<\/li>\n<li>speaker-selection<\/li>\n<li>sync-xhr<\/li>\n<li>unoptimized-images ExperimentalNon-Standard<\/li>\n<li>unsized-media ExperimentalNon-Standard<\/li>\n<li>usb<\/li>\n<li>screen-wake-lock<\/li>\n<li>web-share<\/li>\n<li>xr-spatial-tracking<\/li>\n<\/ul>\n<p><strong>allowfullscreen<\/strong> &#8211; when set true, activates full screen via requestFullscreen() method.<\/p>\n<p><strong>height<\/strong> &#8211; defines frame height in CSS pixels. The default value is 150<\/p>\n<p><strong>weight<\/strong> &#8211; defines frame width in CSS pixels. The default value is 300<\/p>\n<p><strong>name<\/strong> &#8211; name for the embedded browsing context.<\/p>\n<p><strong>allowpaymentrequest<\/strong> &#8211; is set to true, a cross-origin &lt;iframe&gt; is allowed to invoke Payment Request API<\/p>\n<p><strong>loading<\/strong> &#8211; specifies how the web browser should load iframe<\/p>\n<ul>\n<li>eager: immediately load the iframe<\/li>\n<li>lazy: defer iframe loading as defined by the browser (upon reaching a calculated distance from the viewport).<\/li>\n<\/ul>\n<p><strong>sandbox<\/strong> &#8211; applies a set of restrictions for the iframe content. The attribute value is either empty for applying all restrictions or space-separated tokens to lift particular restrictions.<\/p>\n<p><strong>srcdoc<\/strong> &#8211; defines the HTML content of the page to show in the &lt;iframe&gt;<\/p>\n<p>The &lt;iframe&gt; tag supports Global and Event attributes in HTML. Few events triggered by media are \u2018onabort\u2019, \u2018oncanplay\u2019, \u2018ondurationchange\u2019, \u2018onplay\u2019, \u2018onvolumechange\u2019 and more.<\/p>\n<h2 id=\"choice\">iframe vs video Tag: Which One Should You Use?<\/h2>\n<p>When embedding a video in an HTML page, two primary methods are available: the &lt;video&gt; tag and the &lt;iframe&gt; tag. Each serves different purposes, and choosing the right one depends on your hosting, security, control, and design needs.<\/p>\n<p>Here&#8217;s how they compare:<\/p>\n<table dir=\"ltr\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\" data-sheets-root=\"1\" data-sheets-baot=\"1\">\n<colgroup>\n<col width=\"152\" \/>\n<col width=\"377\" \/>\n<col width=\"217\" \/><\/colgroup>\n<tbody>\n<tr>\n<td><strong>Feature<\/strong><\/td>\n<td><strong>&lt;video&gt; Tag<\/strong><\/td>\n<td><strong>&lt;iframe&gt; Tag<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Source<\/td>\n<td>Direct file hosting (MP4, WebM, OGG)<\/td>\n<td>External hosting<\/td>\n<\/tr>\n<tr>\n<td>Customization<\/td>\n<td>Full control over player features, styling<\/td>\n<td>\n<div>\n<div>Limited to options allowed by the embedded platform<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td>SEO Benefits<\/td>\n<td>High &#8211; you can add structured data, transcripts, captions easily<\/td>\n<td>\n<div>\n<div>Moderate &#8211; SEO depends on external platform indexing<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td>Security<\/td>\n<td>Full control over file protection (DRM, domain restrictions)<\/td>\n<td>\n<div>\n<div>Dependent on third-party platform\u2019s security<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td>Loading Speed<\/td>\n<td>Faster if the video is optimized locally<\/td>\n<td>\n<div>\n<div>May be slower if external platform has slow servers<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td>Cross-Origin Restrictions<\/td>\n<td>No restrictions if video is on the same domain<\/td>\n<td>\n<div>\n<div>Restrictions exist; you cannot manipulate iframe content from another domain<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td>Use Cases<\/td>\n<td>Hosting proprietary videos, building custom video experiences<\/td>\n<td>\n<div>\n<div>Quickly embedding videos from platforms like VdoCipher<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 id=\"Responsive\"><strong>Responsive Video Embedding in HTML5<\/strong><\/h2>\n<p>In today&#8217;s digital landscape, where users access websites on a wide range of devices and screen sizes, ensuring that your embedded videos adapt seamlessly to different screens is paramount. Responsive video embedding not only improves user experience but also contributes to higher engagement and better SEO rankings. Here&#8217;s how you can achieve responsive video embedding and optimize the viewing experience for all users. This can be achieved through the following techniques,<\/p>\n<h3>1. Using Width and Height Properties<\/h3>\n<p>A simple way to make the &lt;video&gt; element responsive is to set its width property to 100% and height to auto. This allows the video player to scale up and down responsively:<\/p>\n<pre class=\"p-4 overflow-y-auto\"><code class=\"!whitespace-pre hljs language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">video<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"100%\"<\/span> <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"auto\"<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">source<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"video.mp4\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"video\/mp4\"<\/span>&gt;<\/span>\r\nYour browser does not support the video tag.\r\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">video<\/span>&gt;<\/span><\/code><\/pre>\n<h3>2. Using Max-width Property<\/h3>\n<p>To prevent the video from scaling up beyond its original size, you can use the <code>max-width<\/code> property:<\/p>\n<pre><code>video-container {\r\nmax-width: 100%;\r\nheight: auto;\r\n}<\/code><\/pre>\n<h3>3. Using <strong>Media Queries<\/strong><\/h3>\n<p>Media queries enable you to apply specific styling and sizing rules to embedded videos based on the device&#8217;s screen width. This approach allows you to optimize the video layout for different breakpoints. For instance, you can adjust video dimensions, font sizes, and spacing to create a seamless viewing experience on smartphones, tablets, and desktops.<\/p>\n<div class=\"bg-black rounded-md mb-4\">\n<pre class=\"p-4 overflow-y-auto\"><code class=\"!whitespace-pre hljs language-css\"><span class=\"hljs-keyword\">@media<\/span> screen <span class=\"hljs-keyword\">and<\/span> (<span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">768px<\/span>) {\r\n<span class=\"hljs-selector-class\">.video-container<\/span> {\r\n<span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\r\n}}<\/code><\/pre>\n<\/div>\n<h3><strong>4. Using Viewport Units<\/strong><\/h3>\n<p>Viewport units, denoted as vw (viewport width) and vh (viewport height), provide a dynamic way to set video dimensions as percentages of the screen&#8217;s viewport size. This approach ensures that videos maintain their proportions regardless of the user&#8217;s device. By using viewport units, you can create videos that scale smoothly from large monitors to small smartphone screens.<\/p>\n<div class=\"bg-black rounded-md mb-4\">\n<pre class=\"p-4 overflow-y-auto\"><code class=\"!whitespace-pre hljs language-css\"><span class=\"hljs-selector-class\">.video-container<\/span> {\r\n<span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">90vw<\/span>;\r\n<span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">50vh<\/span>;\r\n}\r\n<\/code><\/pre>\n<\/div>\n<h3><strong>5. Using Aspect Ratio Padding<\/strong><\/h3>\n<p>Maintaining the aspect ratio of embedded videos in HTML5 is crucial to prevent distortion and ensure a visually appealing viewing experience. Applying padding with a percentage-based value (padding-bottom) allows you to create a responsive aspect ratio for the video container. This technique ensures that the video retains its intended dimensions and appearance.<\/p>\n<div class=\"bg-black rounded-md mb-4\">\n<pre class=\"p-4 overflow-y-auto\"><code class=\"!whitespace-pre hljs language-css\"><span class=\"hljs-selector-class\">.video-container<\/span> {\r\n<span class=\"hljs-attribute\">position<\/span>: relative;\r\n<span class=\"hljs-attribute\">padding-bottom<\/span>: <span class=\"hljs-number\">56.25%<\/span>; <span class=\"hljs-comment\">\/* 16:9 aspect ratio *\/<\/span>\r\n}<\/code> <code class=\"!whitespace-pre hljs language-css\"><span class=\"hljs-selector-class\">.video<\/span> {\r\n<span class=\"hljs-attribute\">position<\/span>: absolute;\r\n<span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\r\n<span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100%<\/span><\/code>; }<\/pre>\n<\/div>\n<div class=\"bg-black rounded-md mb-4\">\n<div class=\"p-4 overflow-y-auto\">\n<h3>Example of a Complete Responsive Video<\/h3>\n<pre><code>&lt;div class=\"video-container\"&gt;\r\n&lt;video controls&gt;\r\n&lt;source src=\"video.mp4\" type=\"video\/mp4\"&gt;\r\nYour browser does not support the video tag.\r\n&lt;\/video&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<\/div>\n<pre><code>\r\n.video-container {\r\nmax-width: 100%;\r\nmargin: 0 auto;<\/code><code class=\"!whitespace-pre hljs language-css\"><span class=\"hljs-attribute\">position<\/span>: relative;\r\n<span class=\"hljs-attribute\">padding-bottom<\/span>: <span class=\"hljs-number\">56.25%<\/span>; <span class=\"hljs-comment\">\/* 16:9 aspect ratio *\/<\/span><\/code><code>\r\n}<\/code><\/pre>\n<pre><code>.video-container video {<code class=\"!whitespace-pre hljs language-css\"><span class=\"hljs-attribute\">position<\/span>: absolute;\r\n<span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\r\n<span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100%<\/span><\/code>; }<\/code><\/pre>\n<h2 id=\"ResponsiveIframe\"><strong>Responsive Iframe Embedding in HTML5<\/strong><\/h2>\n<p>You might have come across the need to have a responsive iframe while trying to embed YouTube videos as the default copied snippet does not handle the same. To fulfill the responsiveness, you need to use a container &lt; div &gt; element to wrap the iframe and assign custom class names for differentiation. For example,<\/p>\n<pre><code>&lt;div class=\"vdo-responsive-container\"&gt;\r\n&lt;iframe class=\"vdo-responsive-iframe\" src=\"URL_HERE\"&gt;&lt;\/iframe&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<p>Then write the CSS for custom classes as,<\/p>\n<pre><code>.vdo-responsive-container {\r\nposition: relative;\r\noverflow: hidden;\r\nwidth: 100%;\r\npadding-top: 56.25%; \/* 16:9 Aspect Ratio *\/\r\n}<\/code><\/pre>\n<pre><code>.vdo-responsive-iframe {\r\nposition: absolute;\r\ntop: 0;\r\nleft: 0;\r\nbottom: 0;\r\nright: 0;\r\nwidth: 100%;\r\nheight: 100%;\r\n}<\/code><\/pre>\n<p>You can also adjust for common aspect ratios like 4:3, 3:2, etc using the padding-top value in the .vdo-responsive-container class for different ratios. For example, padding-top: 75%;\u00a0 for 4:3 Aspect Ratio and padding-top: 66.66%; for 3:2 Aspect Ratio.<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/KQ34NBniZNQ?si=mLT-XEjMy6Z7rx7c\" 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=\"allowfullscreen\"><\/iframe><\/p>\n<h2 id=\"desktop\">Desktop Browser Compatibility of Video Elements and Attributes<\/h2>\n<p>The below table shows the version after which the support for video tag or its attribute started in the following desktop browsers,<\/p>\n<table dir=\"ltr\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\" data-sheets-root=\"1\">\n<colgroup>\n<col width=\"100\" \/>\n<col width=\"100\" \/>\n<col width=\"100\" \/>\n<col width=\"100\" \/>\n<col width=\"100\" \/>\n<col width=\"100\" \/><\/colgroup>\n<tbody>\n<tr>\n<td><\/td>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;Chrome&quot;}\">Chrome<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;Edge&quot;}\">Edge<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;Firefox&quot;}\">Firefox<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;Opera&quot;}\">Opera<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;Safari&quot;}\">Safari<\/td>\n<\/tr>\n<tr>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;video&quot;}\">video<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3}\">3<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:12}\">12<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3.5}\">3.5<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:10.5}\">10.5<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3.1}\">3.1<\/td>\n<\/tr>\n<tr>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;Aspect ratio&quot;}\">Aspect ratio<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:79}\">79<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:79}\">79<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:71}\">71<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:66}\">66<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:14}\">14<\/td>\n<\/tr>\n<tr>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;autoplay&quot;}\">autoplay<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3}\">3<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:12}\">12<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3.5}\">3.5<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:10.5}\">10.5<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3.1}\">3.1<\/td>\n<\/tr>\n<tr>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;controls&quot;}\">controls<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3}\">3<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:12}\">12<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3.5}\">3.5<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:10.5}\">10.5<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3.1}\">3.1<\/td>\n<\/tr>\n<tr>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;crossorigin&quot;}\">crossorigin<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:33}\">33<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:18}\">18<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:74}\">74<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:20}\">20<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:10}\">10<\/td>\n<\/tr>\n<tr>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;height&quot;}\">height<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3}\">3<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:12}\">12<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3.5}\">3.5<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:10.5}\">10.5<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3.1}\">3.1<\/td>\n<\/tr>\n<tr>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;loop&quot;}\">loop<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3}\">3<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:12}\">12<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:11}\">11<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:10.5}\">10.5<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3.1}\">3.1<\/td>\n<\/tr>\n<tr>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;muted&quot;}\">muted<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:30}\">30<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:12}\">12<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:11}\">11<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;Yes&quot;}\">Yes<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:5}\">5<\/td>\n<\/tr>\n<tr>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;poster&quot;}\">poster<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3}\">3<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:12}\">12<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3.6}\">3.6<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:10.5}\">10.5<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3.1}\">3.1<\/td>\n<\/tr>\n<tr>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;preload&quot;}\">preload<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3}\">3<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:12}\">12<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:4}\">4<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;Yes&quot;}\">Yes<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3.1}\">3.1<\/td>\n<\/tr>\n<tr>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;src&quot;}\">src<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3}\">3<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:12}\">12<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3.5}\">3.5<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:10.5}\">10.5<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3.1}\">3.1<\/td>\n<\/tr>\n<tr>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;width&quot;}\">width<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3}\">3<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:12}\">12<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3.5}\">3.5<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:10.5}\">10.5<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3.1}\">3.1<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 id=\"mobile\">Mobile Browser Compatibility of Video Elements and Attributes<\/h2>\n<p>The below table shows the version after which the support for video tag or its attribute started in the following mobile browsers,<\/p>\n<table dir=\"ltr\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\" data-sheets-root=\"1\">\n<colgroup>\n<col width=\"113\" \/>\n<col width=\"100\" \/>\n<col width=\"100\" \/>\n<col width=\"100\" \/>\n<col width=\"100\" \/>\n<col width=\"100\" \/>\n<col width=\"100\" \/><\/colgroup>\n<tbody>\n<tr>\n<td><\/td>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;Chrome Android&quot;}\">Chrome Android<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;Firefox for Android&quot;}\">Firefox for Android<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;Opera Android&quot;}\">Opera Android<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;Safari on iOS&quot;}\">Safari on iOS<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;Samsung Internet&quot;}\">Samsung Internet<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;WebView Android&quot;}\">\n<div>\n<div>WebView Android<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;video&quot;}\">video<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:18}\">18<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:4}\">4<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:14}\">14<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3}\">3<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:1}\">1<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:4.4}\">4.4<\/td>\n<\/tr>\n<tr>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;Aspect ratio computed from width and height attributes&quot;}\">Aspect ratio<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:79}\">79<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:79}\">79<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:57}\">57<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:14}\">14<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:12}\">12<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:79}\">79<\/td>\n<\/tr>\n<tr>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;autoplay&quot;}\">autoplay<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:18}\">18<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:4}\">4<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:14}\">14<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:10}\">10<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:1}\">1<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:4.4}\">4.4<\/td>\n<\/tr>\n<tr>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;controls&quot;}\">controls<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:18}\">18<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:4}\">4<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:14}\">14<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3}\">3<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:1}\">1<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:4.4}\">4.4<\/td>\n<\/tr>\n<tr>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;crossorigin&quot;}\">crossorigin<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:33}\">33<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:79}\">79<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:20}\">20<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:10}\">10<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:2}\">2<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;4.4.3&quot;}\">4.4.3<\/td>\n<\/tr>\n<tr>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;height&quot;}\">height<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:18}\">18<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:4}\">4<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:14}\">14<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3}\">3<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:1}\">1<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:4.4}\">4.4<\/td>\n<\/tr>\n<tr>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;loop&quot;}\">loop<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:18}\">18<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:14}\">14<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:14}\">14<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:6}\">6<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:1}\">1<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:4.4}\">4.4<\/td>\n<\/tr>\n<tr>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;muted&quot;}\">muted<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:30}\">30<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:14}\">14<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:18}\">18<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;?&quot;}\">?<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:2}\">2<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:4.4}\">4.4<\/td>\n<\/tr>\n<tr>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;poster&quot;}\">poster<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:18}\">18<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:4}\">4<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:14}\">14<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3}\">3<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:1}\">1<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:4.4}\">4.4<\/td>\n<\/tr>\n<tr>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;preload&quot;}\">preload<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;Yes&quot;}\">Yes<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:4}\">4<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;Yes&quot;}\">Yes<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3}\">3<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;Yes&quot;}\">Yes<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;Yes&quot;}\">Yes<\/td>\n<\/tr>\n<tr>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;src&quot;}\">src<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:18}\">18<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:4}\">4<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:14}\">14<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3}\">3<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:1}\">1<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:4.4}\">4.4<\/td>\n<\/tr>\n<tr>\n<td data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;width&quot;}\">width<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:18}\">18<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:4}\">4<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:14}\">14<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:3}\">3<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:1}\">1<\/td>\n<td data-sheets-value=\"{&quot;1&quot;:3,&quot;3&quot;:4.4}\">4.4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 id=\"Security\" style=\"padding-top: 50px; margin-top: -50px;\">How to Securely Embed Videos Preventing Illegal Downloads<\/h2>\n<p>The best way to prevent your premium videos from being illegally downloaded is to use VdoCipher embed code. VdoCipher embed code is similar to that of YouTube, containing an &lt; iframe &gt; element but with DRM Encryption enabled \u2018src\u2019 player.<\/p>\n<pre>&lt;iframe src=\"https:\/\/player.vdocipher.com\/playerAssets\/1.x\/vdo\/embed\/index.html#otp=20160313versASE323NbiX5si4N3R6iqCixmcl4u41SZMyP9ABAsAs12tehmBPG2&amp;playbackInfo=eyJ2aWRlb0lkIjoiYmNiMDdkYmRmOWE1OTZkNDkwZTRhZDRkNzViMDBlYmQifQ==\" style=\"border:0;height:360px;width:640px;max-width:100%\" allowFullScreen=\"true\" allow=\"encrypted-media\"&gt;&lt;\/iframe&gt;<\/pre>\n<p>This iframe code unfolds to contain a &lt; video &gt; element containing video &#8216;src&#8217; URLs, and these video source URLs are protected by multi-DRM technology. This not only protects video downloads but also screen capture on all Google and Apple devices with their browsers. When opened, even the video source URL will generate an error page with a missing key error. This happens because DRM encryption uses dynamic cloud-based key generation and is break-proof.<\/p>\n<pre><code><\/code><code>&lt;Error&gt;\r\n&lt;Code&gt;MissingKey&lt;\/Code&gt;\r\n&lt;Message&gt;Missing Key-Pair-Id query parameter or cookie value&lt;\/Message&gt;\r\n&lt;\/Error&gt;\r\n<\/code> Apart from providing secure embed code for your videos, VdoCipher has many advanced features as follows:<\/pre>\n<ul>\n<li>Hollywood-Grade DRM Encryption<\/li>\n<li>URL Whitelist (Domain restriction)<\/li>\n<li>VdoCipher WordPress Plugin with easy integration<\/li>\n<li>Smart <a href=\"https:\/\/www.vdocipher.com\/blog\/2020\/09\/online-video-player-html5-website\/\">HTML5 Video Player<\/a> with Adaptive Bitrate Streaming<\/li>\n<li>Dynamic Watermarking<\/li>\n<li>Secure offline downloads on Android<\/li>\n<li>API and SDKs<\/li>\n<\/ul>\n<h2 id=\"faq\" style=\"padding-top: 50px; margin-top: -50px;\">FAQs<\/h2>\n<h3>Can video element tag be used to play an audio file?<\/h3>\n<p>Yes, you can play the audio using the &lt; video &gt; tag, but using the &lt; audio &gt; tag will give a better user experience via consolidated UI.<\/p>\n<h3>How do I decide between using the &lt;video&gt; tag and the &lt;iframe&gt; tag?<\/h3>\n<p>You should use the &lt;video&gt; tag if you are hosting your own video files and want full control over playback, styling, and SEO. Use the &lt;iframe&gt; tag when embedding videos from third-party platforms like YouTube or VdoCipher for faster deployment without managing hosting or bandwidth.<\/p>\n<h3>Is it possible to edit an iframe video inner HTML elements?<\/h3>\n<p>Not possible in the case of src being another domain as it is against the browser\u2019s cross-origin policy. Else, it can be done via the use of JS or jquery.<\/p>\n<h3>What browsers support the HTML &lt;video&gt; tag?<\/h3>\n<p>The HTML &lt;video&gt; tag is supported by all major browsers, including Google Chrome, Mozilla Firefox, Internet Explorer, Safari, and Opera.<\/p>\n<h3>What are the benefits of using an iframe?<\/h3>\n<p>Iframes offer several benefits over traditional HTML frames, including the ability to load content asynchronously and support for modern web standards.<\/p>\n<h3>What are the drawbacks to using an iframe?<\/h3>\n<p>One major drawback of having iframes is that they may impact the performance of your page if not used correctly. For example, iframes can slow down page loading time.<\/p>\n<h3>What are the best practices to embed Video Player?<\/h3>\n<p>Ensure that the video player is optimized for fast loading times. This can be achieved by compressing video files and using adaptive streaming. Ensure that your video player supports captions and transcripts, making your content accessible to a broader audience.<\/p>\n<h3>Does embedding videos improve SEO?<\/h3>\n<p>Yes, if you use the &lt;video&gt; tag with captions, structured data (schema.org\/VideoObject), and meaningful surrounding text, it can significantly boost SEO. Videos improve engagement rates and can help your pages rank better in Google&#8217;s video search and featured snippets.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Embedding a video file in an HTML document allows the video playback directly in the web browser without needing a separate video player application. HTML video embedding is also important because it will enable videos to be played on mobile devices that do not have a dedicated video player application. For example, many smartphones and [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":16887,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[261,226],"tags":[369,370,16,85],"class_list":{"0":"post-12033","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-video-player","8":"category-video-tech","9":"tag-embed-video","10":"tag-embed-video-player","11":"tag-html5-drm","12":"tag-video-embed-api","13":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.0 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Embed Video in HTML Using iframe or Video Tag Element<\/title>\n<meta name=\"description\" content=\"This article describes multiple ways to embed video in HTML documents using iframe and embed video player using video tag.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vdocipher.com\/blog\/how-to-embed-video-in-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Embed Video in HTML Using iframe or Video Tag Element\" \/>\n<meta property=\"og:description\" content=\"This article describes multiple ways to embed video in HTML documents using iframe and embed video player using video tag.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vdocipher.com\/blog\/how-to-embed-video-in-html\/\" \/>\n<meta property=\"og:site_name\" content=\"VdoCipher Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vdociphertech\/\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-23T12:35:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-24T10:59:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2023\/09\/How-to-embed-Video-embed-in-HTML.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"450\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Vishal Sharma\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@vdocipher\" \/>\n<meta name=\"twitter:site\" content=\"@vdocipher\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vishal Sharma\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.vdocipher.com\/blog\/how-to-embed-video-in-html\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.vdocipher.com\/blog\/how-to-embed-video-in-html\/\"},\"author\":{\"name\":\"Vishal Sharma\",\"@id\":\"https:\/\/www.vdocipher.com\/blog\/#\/schema\/person\/329776cb6c9589f6b377be584ca4d4f9\"},\"headline\":\"How to Embed Video in HTML Using iframe or Video Tag Element\",\"datePublished\":\"2026-02-23T12:35:22+00:00\",\"dateModified\":\"2026-02-24T10:59:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.vdocipher.com\/blog\/how-to-embed-video-in-html\/\"},\"wordCount\":3250,\"publisher\":{\"@id\":\"https:\/\/www.vdocipher.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.vdocipher.com\/blog\/how-to-embed-video-in-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www-uat.vdocipher.com\/blog\/wp-content\/uploads\/2023\/09\/How-to-embed-Video-embed-in-HTML.jpg\",\"keywords\":[\"embed video\",\"embed video player\",\"HTML5 DRM\",\"video embed api\"],\"articleSection\":[\"Video Player\",\"Video Tech\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vdocipher.com\/blog\/how-to-embed-video-in-html\/\",\"url\":\"https:\/\/www.vdocipher.com\/blog\/how-to-embed-video-in-html\/\",\"name\":\"How to Embed Video in HTML Using iframe or Video Tag Element\",\"isPartOf\":{\"@id\":\"https:\/\/www.vdocipher.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.vdocipher.com\/blog\/how-to-embed-video-in-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.vdocipher.com\/blog\/how-to-embed-video-in-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www-uat.vdocipher.com\/blog\/wp-content\/uploads\/2023\/09\/How-to-embed-Video-embed-in-HTML.jpg\",\"datePublished\":\"2026-02-23T12:35:22+00:00\",\"dateModified\":\"2026-02-24T10:59:23+00:00\",\"description\":\"This article describes multiple ways to embed video in HTML documents using iframe and embed video player using video tag.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vdocipher.com\/blog\/how-to-embed-video-in-html\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vdocipher.com\/blog\/how-to-embed-video-in-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vdocipher.com\/blog\/how-to-embed-video-in-html\/#primaryimage\",\"url\":\"https:\/\/www-uat.vdocipher.com\/blog\/wp-content\/uploads\/2023\/09\/How-to-embed-Video-embed-in-HTML.jpg\",\"contentUrl\":\"https:\/\/www-uat.vdocipher.com\/blog\/wp-content\/uploads\/2023\/09\/How-to-embed-Video-embed-in-HTML.jpg\",\"width\":1000,\"height\":450,\"caption\":\"How to embed video in HTML\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vdocipher.com\/blog\/how-to-embed-video-in-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vdocipher.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Embed Video in HTML Using iframe or Video Tag Element\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vdocipher.com\/blog\/#website\",\"url\":\"https:\/\/www.vdocipher.com\/blog\/\",\"name\":\"VdoCipher Blog\",\"description\":\"Secure Video Streaming\",\"publisher\":{\"@id\":\"https:\/\/www.vdocipher.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vdocipher.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vdocipher.com\/blog\/#organization\",\"name\":\"VdoCipher\",\"url\":\"https:\/\/www.vdocipher.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vdocipher.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2016\/11\/VdoCipher-logo2.png\",\"contentUrl\":\"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2016\/11\/VdoCipher-logo2.png\",\"width\":1625,\"height\":1925,\"caption\":\"VdoCipher\"},\"image\":{\"@id\":\"https:\/\/www.vdocipher.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vdociphertech\/\",\"https:\/\/x.com\/vdocipher\",\"https:\/\/www.linkedin.com\/company\/vdocipher\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.vdocipher.com\/blog\/#\/schema\/person\/329776cb6c9589f6b377be584ca4d4f9\",\"name\":\"Vishal Sharma\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vdocipher.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/392a4e1ad0a2c7e4c82bde7a7ea60bbb51ea7e77e8185b8c0e2aceb39aa58ccc?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/392a4e1ad0a2c7e4c82bde7a7ea60bbb51ea7e77e8185b8c0e2aceb39aa58ccc?s=96&r=g\",\"caption\":\"Vishal Sharma\"},\"description\":\"My expertise focuses on DRM encryption, CDN technologies, and streamlining marketing campaigns to drive engagement and growth. At VdoCipher, I've significantly enhanced digital experiences and contributed to in-depth technical discussions in the eLearning, Media, and Security sectors, showcasing a commitment to innovation and excellence in the digital landscape.\",\"url\":\"https:\/\/www-uat.vdocipher.com\/blog\/author\/vishal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Embed Video in HTML Using iframe or Video Tag Element","description":"This article describes multiple ways to embed video in HTML documents using iframe and embed video player using video tag.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vdocipher.com\/blog\/how-to-embed-video-in-html\/","og_locale":"en_US","og_type":"article","og_title":"How to Embed Video in HTML Using iframe or Video Tag Element","og_description":"This article describes multiple ways to embed video in HTML documents using iframe and embed video player using video tag.","og_url":"https:\/\/www.vdocipher.com\/blog\/how-to-embed-video-in-html\/","og_site_name":"VdoCipher Blog","article_publisher":"https:\/\/www.facebook.com\/vdociphertech\/","article_published_time":"2026-02-23T12:35:22+00:00","article_modified_time":"2026-02-24T10:59:23+00:00","og_image":[{"width":1000,"height":450,"url":"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2023\/09\/How-to-embed-Video-embed-in-HTML.jpg","type":"image\/jpeg"}],"author":"Vishal Sharma","twitter_card":"summary_large_image","twitter_creator":"@vdocipher","twitter_site":"@vdocipher","twitter_misc":{"Written by":"Vishal Sharma","Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.vdocipher.com\/blog\/how-to-embed-video-in-html\/#article","isPartOf":{"@id":"https:\/\/www.vdocipher.com\/blog\/how-to-embed-video-in-html\/"},"author":{"name":"Vishal Sharma","@id":"https:\/\/www.vdocipher.com\/blog\/#\/schema\/person\/329776cb6c9589f6b377be584ca4d4f9"},"headline":"How to Embed Video in HTML Using iframe or Video Tag Element","datePublished":"2026-02-23T12:35:22+00:00","dateModified":"2026-02-24T10:59:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.vdocipher.com\/blog\/how-to-embed-video-in-html\/"},"wordCount":3250,"publisher":{"@id":"https:\/\/www.vdocipher.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.vdocipher.com\/blog\/how-to-embed-video-in-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www-uat.vdocipher.com\/blog\/wp-content\/uploads\/2023\/09\/How-to-embed-Video-embed-in-HTML.jpg","keywords":["embed video","embed video player","HTML5 DRM","video embed api"],"articleSection":["Video Player","Video Tech"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.vdocipher.com\/blog\/how-to-embed-video-in-html\/","url":"https:\/\/www.vdocipher.com\/blog\/how-to-embed-video-in-html\/","name":"How to Embed Video in HTML Using iframe or Video Tag Element","isPartOf":{"@id":"https:\/\/www.vdocipher.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vdocipher.com\/blog\/how-to-embed-video-in-html\/#primaryimage"},"image":{"@id":"https:\/\/www.vdocipher.com\/blog\/how-to-embed-video-in-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www-uat.vdocipher.com\/blog\/wp-content\/uploads\/2023\/09\/How-to-embed-Video-embed-in-HTML.jpg","datePublished":"2026-02-23T12:35:22+00:00","dateModified":"2026-02-24T10:59:23+00:00","description":"This article describes multiple ways to embed video in HTML documents using iframe and embed video player using video tag.","breadcrumb":{"@id":"https:\/\/www.vdocipher.com\/blog\/how-to-embed-video-in-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vdocipher.com\/blog\/how-to-embed-video-in-html\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vdocipher.com\/blog\/how-to-embed-video-in-html\/#primaryimage","url":"https:\/\/www-uat.vdocipher.com\/blog\/wp-content\/uploads\/2023\/09\/How-to-embed-Video-embed-in-HTML.jpg","contentUrl":"https:\/\/www-uat.vdocipher.com\/blog\/wp-content\/uploads\/2023\/09\/How-to-embed-Video-embed-in-HTML.jpg","width":1000,"height":450,"caption":"How to embed video in HTML"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vdocipher.com\/blog\/how-to-embed-video-in-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vdocipher.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Embed Video in HTML Using iframe or Video Tag Element"}]},{"@type":"WebSite","@id":"https:\/\/www.vdocipher.com\/blog\/#website","url":"https:\/\/www.vdocipher.com\/blog\/","name":"VdoCipher Blog","description":"Secure Video Streaming","publisher":{"@id":"https:\/\/www.vdocipher.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vdocipher.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vdocipher.com\/blog\/#organization","name":"VdoCipher","url":"https:\/\/www.vdocipher.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vdocipher.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2016\/11\/VdoCipher-logo2.png","contentUrl":"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2016\/11\/VdoCipher-logo2.png","width":1625,"height":1925,"caption":"VdoCipher"},"image":{"@id":"https:\/\/www.vdocipher.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vdociphertech\/","https:\/\/x.com\/vdocipher","https:\/\/www.linkedin.com\/company\/vdocipher"]},{"@type":"Person","@id":"https:\/\/www.vdocipher.com\/blog\/#\/schema\/person\/329776cb6c9589f6b377be584ca4d4f9","name":"Vishal Sharma","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vdocipher.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/392a4e1ad0a2c7e4c82bde7a7ea60bbb51ea7e77e8185b8c0e2aceb39aa58ccc?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/392a4e1ad0a2c7e4c82bde7a7ea60bbb51ea7e77e8185b8c0e2aceb39aa58ccc?s=96&r=g","caption":"Vishal Sharma"},"description":"My expertise focuses on DRM encryption, CDN technologies, and streamlining marketing campaigns to drive engagement and growth. At VdoCipher, I've significantly enhanced digital experiences and contributed to in-depth technical discussions in the eLearning, Media, and Security sectors, showcasing a commitment to innovation and excellence in the digital landscape.","url":"https:\/\/www-uat.vdocipher.com\/blog\/author\/vishal\/"}]}},"yoast":{"focuskw":"embed video in html","title":"%%title%% %%page%%","metadesc":"This article describes multiple ways to embed video in HTML documents using iframe and embed video player using video tag.","linkdex":"86","metakeywords":"","meta-robots-noindex":"","meta-robots-nofollow":"","meta-robots-adv":"","canonical":"","redirect":"","opengraph-title":"","opengraph-description":"","opengraph-image":"","twitter-title":"","twitter-description":"","twitter-image":""},"_links":{"self":[{"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/posts\/12033","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/comments?post=12033"}],"version-history":[{"count":90,"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/posts\/12033\/revisions"}],"predecessor-version":[{"id":21337,"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/posts\/12033\/revisions\/21337"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/media\/16887"}],"wp:attachment":[{"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/media?parent=12033"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/categories?post=12033"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/tags?post=12033"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}