CINXE.COM
HTML Video Codes
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="html video codes, html video, html5, markup, mark up, music video code, background music html codes, flash, youtube, firefox, google chrome, microsoft internet explorer, i.e., ie, apple safari, h.264, webm, codec, codecs"> <meta name="Description" content="Add video to your web page using this HTML video codes."> <link rel="canonical" href="https://www.quackit.com/html/codes/html_video_codes.cfm"> <title>HTML Video Codes</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="shortcut icon" href="/pix/favicon96.png"> <link rel="apple-touch-icon" href="/pix/apple-touch-icon.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="/common/css/master.45.min.css" rel="stylesheet"> <script async src="https://cdn.fuseplatform.net/publift/tags/2/3499/fuse.js"></script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3H025ZKLN"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q3H025ZKLN'); </script> </head> <body> <header class="site-header"> <div class="site-header-base"> <div class="site-logo"> <a title="Quackit Homepage" target="_top" href="/"><img src="/pix/quackit_logo_watermark.png" width="87" height="33" alt="Quackit Logo"></a> </div> <button id="site-nav-toggler" class="site-nav-toggler" aria-expanded="false" aria-controls="site-nav"> <span class="sr-only">Toggle navigation</span> ☰ </button> </div> <nav id="site-nav" class="site-nav"> <div class="site-links"> <ul> <li><a href="/"><i class="fa fa-home"></i> <span class="sr-only">Home</span></a></li> <li><a href="/html/">HTML</a></li> <li><a href="/css/">CSS</a></li> <li><a href="/scripting/">Scripting</a></li> <li><a href="/database/">Database</a></li> </ul> </div> <div class="site-search-top"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:98x0fk-bbgi"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="20" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> </div> </nav> </header> <div class="main"> <article class="content"> <h1 class="page-title">HTML Video Codes</h1> <div class="ad ad-top"> <!-- GAM 71161633/QCKIT_quackit/article_header --> <div data-fuse="23059883623"></div> </div> <p class="lead">So you've made a video, you've uploaded it to a web server on the Internet, and now you want to show it to your users?</p> <p>No problem! This page provides you with all the code you need to do the job!</p> <div class="ad"> <!-- GAM 71161633/QCKIT_quackit/article_incontent_1 --> <div data-fuse="23059883629"></div> </div> <h2>HTML5 <a href="/html/tags/html_video_tag.cfm"><code><video></code></a> Tag</h2> <p>The latest version of HTML (i.e. HTML5) makes it extremely easy to add video to a web page. HTML5 allows you to use a <a href="/html/tags/html_video_tag.cfm"><code><video></code></a> tag, which, believe it or not, embeds video right into your web page!</p> <p>Here's an example:</p> <script src="/common/js/codemirror/lib/codemirror.js"></script> <script src="/common/js/codemirror/mode/htmlmixed/htmlmixed.js"></script> <script src="/common/js/codemirror/mode/css/css.js"></script> <script src="/common/js/codemirror/mode/javascript/javascript.js"></script> <script src="/common/js/codemirror/mode/xml/xml.js"></script> <div class="code-only"> <textarea id="example1" autocomplete="off" spellcheck="false"><video src="/video/pass-countdown.ogg" width="50%" controls>
<p>If you are reading this, it is because your browser does not support the 'video' element. Try using the 'object' element listed further down the page.</p>
</video>
<p>If you can see the video controls but the video doesn't play when you click the "Play" button, your browser might not support this file type (i.e. <code>Ogg</code>). In this case, try the same code, but with a different file format.</p></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/codes/html_video_codes_the_video_tag" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode1 = CodeMirror.fromTextArea(document.getElementById("example1"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Embed a YouTube Video</h2> <p>You can embed a YouTube video by copying the code from the <samp>Embed</samp> link under <samp>Share</samp> link (underneath the video on YouTube).</p> <p>YouTube uses an <a href="/html/tags/html_iframe_tag.cfm"><code><iframe></code></a> tag to embed the video, which results in something like this:</p> <script src="/common/js/codemirror/mode/htmlmixed/htmlmixed.js"></script> <div class="code-only"> <textarea id="example2" autocomplete="off" spellcheck="false"><iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/q44kByZmKDs?si=mUicztscud7mfLZ7" 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></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/codes/html_video_codes_embed_youtube_video" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode2 = CodeMirror.fromTextArea(document.getElementById("example2"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Responsive Embed</h2> <p>If you use a Bootstrap based website, you can use Bootstrap's <a href="/bootstrap/bootstrap_3/tutorial/bootstrap_responsive_embed.cfm">responsive embed component</a> to scale your video to its containing block.</p> <p>If you use this method, you can remove the <code>width</code> and <code>height</code> dimensions from the <a href="/html/tags/html_iframe_tag.cfm"><code><iframe></code></a>, as Bootstrap will scale it as required.</p> <div class="code-only"> <textarea id="example3" autocomplete="off" spellcheck="false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

</head>
<body>
<div class="container-fluid">
		
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/q44kByZmKDs?si=mUicztscud7mfLZ7" 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>
</div>

</div>
		
<!-- jQuery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
</body>
</html></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/codes/html_video_codes_embed_youtube_video_using_bootstrap_responsive_embed" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode3 = CodeMirror.fromTextArea(document.getElementById("example3"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Linking to a video file</h2> <p>The easiest way to include video on your website is to link to it. This is suitable if you don't want to actually embed the video within your HTML page. You can link to a video file using the <a href="/html/tags/html_a_tag.cfm"><code><a></code></a> tag. All you need to do is write something like this:</p> <div class="code-only"> <textarea id="example4" autocomplete="off" spellcheck="false"><a href="/video/pass-countdown.ogg">Watch this video</a></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/codes/html_video_codes_link_to_video" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode4 = CodeMirror.fromTextArea(document.getElementById("example4"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p>This assumes that the video file is in the specified location.</p> <h2>Video Formats</h2> <p>Some of the more common video formats are:</p> <dl> <dt><code>.swf</code></dt> <dd>Shockwave/Flash File (by Macromedia/Adobe)</dd> <dt><code>.wmv</code></dt> <dd>Windows Media Player video format (by Microsoft)</dd> <dt><code>.mov</code></dt> <dd>Quicktime video format (by Apple)</dd> <dt><code>.mpeg</code></dt> <dd>Video compression format (specified by the Moving Pictures Experts Group)</dd> <dt><code>.ogg</code></dt> <dd>Open standard container format maintained by the Xiph.Org Foundation. Also includes .ogv, .oga, .ogx, and .spx extensions</dd> <dt><code>.webM</code></dt> <dd>royalty-free, high-quality open video compression format for use with HTML5 video.</dd> </dl> <h2>Web Server Support for MIME Type</h2> <p>You must ensure that your web server supports the video format that you use. If you find that your video plays OK on your local computer, but doesn't play on your live web server, it's probably because the live web server isn't configured properly for your video format. You need to ensure your web server supports the <i>MIME</i> type of your video.</p> <p>If you're using an Apache web server, you can add the following code to your <code>httpd.conf</code> file or to an <code>.htaccess</code> file in the directory where your video file is:</p> <div class="code-only"> <textarea id="example5" autocomplete="off" spellcheck="false">AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm</textarea> </div> <script> var exampleCode5 = CodeMirror.fromTextArea(document.getElementById("example5"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p>If you're using Plesk:</p> <ol> <li>Select the website you want to configure (if you have more than one website)</li> <li>Go to <samp>Web Directories</samp></li> <li>Click on the <kbd>MIME Types</kbd> tab</li> <li>Click <kbd>Add New MIME Type</kbd></li> <li>Enter the file extension into the <samp>Extension</samp> field (eg, <kbd>.ogg</kbd>)</li> <li>Enter the content into the <samp>Content</samp> field (eg, <kbd>video/ogg</kbd>). Alternatively, you may be able to select the value from the drop down menu (if it's available).</li> <li>Click <kbd>OK</kbd></li> </ol> </article> <div class="sidebar"> <div class="relatedLinks"> <h4>Related</h4> <ul> <li><a href="/html/tags/html_video_tag.cfm" title="">HTML5 <code><video></code> Tag</a></li> <li><a href="/bootstrap/bootstrap_3/tutorial/bootstrap_responsive_embed.cfm" title="">Bootstrap Responsive Embed</a></li> <li><a href="/html/tags/html_audio_tag.cfm" title="">HTML5 <code><audio></code> Tag</a></li> </ul> </div> <nav> <ul> <li> <h3><a href="/html/codes/">HTML Codes</a></h3> <ul> <li><a href="/html/codes/html_background_codes.cfm" title="Set background properties on any HTML element.">HTML Background Code</a></li> <li><a href="/html/codes/bold/" title="Specify bold text in your HTML code.">HTML Bold</a></li> <li><a href="/html/codes/color/" title="Add color to your HTML code.">HTML Color</a></li> <li><a href="/html/html_color_codes.cfm" title="Hexadecimal color codes">HTML Color Codes</a></li> <li><a href="/html/codes/comment_box_code.cfm" title="Create a comment box within your HTML codes.">HTML Comment Box Code</a></li> <li><a href="/html/codes/html_scroll_box.cfm" title="Create a scroll box within your HTML codes.">HTML Scrollbox Code</a></li> <li><a href="/html/codes/tables/" title="Add an HTML table to your web page or blog.">HTML Tables</a></li> <li><a href="/html/codes/text/" title="Specify font family, size, color and more within your HTML code.">HTML Text Code</a></li> <li><a href="/html/codes/html_picture_codes.cfm" title="Embed pictures within your HTML code.">HTML Image Code</a></li> <li><a href="/html/codes/link/" title="Create hyperlinks between web pages and other documents.">HTML Link Code</a></li> <li><a href="/html/codes/html_marquee_code.cfm">HTML Marquee Code</a></li> <li><a href="/html/html_music_code.cfm">HTML Music Code</a></li> <li><a href="/html/codes/html_video_codes.cfm">HTML Video Code</a></li> <li><a href="/html/codes/html_form_code.cfm">HTML Form Code</a></li> <li><a href="/html/codes/html_frames_code.cfm">HTML Frames Code</a></li> <li><a href="/html/html_special_characters.cfm" title="ISO-8859-1">HTML Entities</a></li> <li><a href="/html/examples/" title="Copy/paste examples">HTML Examples</a></li> <li><a href="/html/html_help.cfm" title="HTML help with tables, forms, fonts, color, image maps, hyperlinks and more.">HTML Help/Cheat Sheet</a></li> <li><a href="/html/templates/" title="Thousands of pre-built websites">HTML Templates</a></li> <li><a style="padding-left:60px;font-style:italic;" href="/html/codes/">More Codes...</a></li> </ul> </li> <li> <h3><a href="/html/">HTML Reference</a></h3> <ul> <li><a href="/html/tags/" title="Alphabetical list of all HTML tags">HTML Tags</a></li> <li><a href="/html/codes/" title="">HTML Codes</a></li> <li><a href="/html/templates/" title="">HTML Templates</a></li> <li><a href="/html/html_editors/">HTML Editors</a></li> <li><a href="/html/tutorial/" title="">HTML Tutorial</a></li> <li><a href="/create-a-website/" title="">Create a Website</a></li> <li><a href="/character_sets/">Character Set Reference</a></li> </ul> </li> </ul> </nav> <div class="ad ad-left"> <!-- GAM 71161633/QCKIT_quackit/article_vrec_2 --> <div data-fuse="23059511712"></div> </div> </div> <div class="ads"> <div class="ad ad-right"> <!-- GAM 71161633/QCKIT_quackit/article_vrec_1 --> <div data-fuse="23059883626"></div> </div> </div> </div> <div class="searchbox-bottom"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:npmuvy-i8kk"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="30" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> <script src="//cse.google.com/cse/brand?form=cse-search-box-bottom&lang=en"></script> </div> <footer> <p class="about"><a href="/"><i class="fa fa-home"></i> Home</a> | <a href="/about.cfm" rel="nofollow">About</a> | <a href="/contact.cfm" rel="nofollow">Contact</a> | <a href="/terms_of_use.cfm" rel="nofollow">Terms of Use</a> | <a href="/privacy_policy.cfm" rel="nofollow">Privacy Policy</a></p> <p>© Copyright 2000 - 2025 Quackit.com </p> </footer> <script src="/common/js/spectrum/spectrum.js"></script> <script src="/common/js/lightbox2-master/dist/js/lightbox.min.js" charset="utf-8"></script> <script> $(document).ready(function(){ $( "#site-nav-toggler" ).click(function() { $( "#site-nav" ).toggle( "slow" ); }); }); </script> <script> $(function(){var a=window.location.href;$(".sidebar nav a").each(function(){a==this.href&&$(this).closest("li").addClass("selected")})}); </script> </body> </html>