howto-insert-youtube-video.html 31.3 KB

Raw Blame History Permalink

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css" media="all">
    @import "/QA/2006/01/blogstyle.css";
    </style>
    <meta name="keywords" content='html, html5, video' />
    <meta name="description" content="I was struggling for inserting a video in a Web page, I had to change a bit the markup which was proposed to me to make it work in a way that satisfies me." />
    <meta name="revision" content="$Id: howto-insert-youtube-video.html,v 1.78 2011/12/16 03:03:02 gerald Exp $" />
   <link rel="alternate" type="application/atom+xml" title="Atom" href="http://www.w3.org/QA/atom.xml" />
   <link rel="alternate" type="application/rss+xml" title="RSS 1.0" href="http://www.w3.org/QA/news.rss" />
   <title>How To Insert A Video From Youtube - W3C Blog</title>

   <link rel="start" href="http://www.w3.org/QA/" title="Home" />
   <link rel="prev" href="http://www.w3.org/QA/2008/09/powdering_logos_again.html" title="Powdering logos (again)" />
   <link rel="next" href="http://www.w3.org/QA/2008/09/learn-test-smil30.html" title="Learn about SMIL 3.0 and test it!" />

   <!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
         xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
    rdf:about="http://www.w3.org/QA/2008/09/howto-insert-youtube-video.html"
    trackback:ping="http://www.w3.org/QA/sununga/mt-tb.cgi/217"
    dc:title="How To Insert A Video From Youtube"
    dc:identifier="http://www.w3.org/QA/2008/09/howto-insert-youtube-video.html"
    dc:subject="HTML"
    dc:description="I was struggling for inserting a video in a Web page, I had to change a bit the markup which was proposed to me to make it work in a way that satisfies me."
    dc:creator="Karl Dubost"
    dc:date="2008-09-08T01:50:22+00:00" />
</rdf:RDF>
-->

    <!-- <script type="text/javascript" src="http://www.w3.org/QA/mt.js"></script>-->

</head>
<body class="layout-one-column">
      <div id="banner">
      <h1 id="title">
	<a href="http://www.w3.org/"><img height="48" alt="W3C" id="logo" src="http://www.w3.org/Icons/WWW/w3c_home_nb" /></a>
W3C Blog
</h1>
    </div>

    <ul class="navbar" id="menu">
        <li><strong><a href="/QA/" title="W3C Blog Home">[ W3C Blog ]</a></strong></li>
        <li><a href="/QA/Library/" title="Documents and Publications on Web and Quality">Documents</a></li>
        <li><a href="/QA/Tools/" accesskey="3" title="Validators and other Tools">Tools</a></li>
        <li><a href="/2007/12/qa-blog-help/index#feedback">Feedback</a></li>
    </ul>
<div id="searchbox">
<form method="get" action="http://www.google.com/custom" enctype="application/x-www-form-urlencoded">
<p id="formbox"><input type="text" size="15" class="textfield" name="q" accesskey="E" maxlength="255" /> <input type="submit" class="submitfield" value="Search" id="goButton" name="sa" accesskey="G" /> <input type="hidden" name="cof" value="T:black;LW:72;ALC:#ff3300;L:http://www.w3.org/Icons/w3c_home;LC:#000099;LH:48;BGC:white;AH:left;VLC:#660066;GL:0;AWFID:0b9847e42caf283e;" /><input type="hidden" id="searchW3C" name="sitesearch" checked="checked" value="www.w3.org/QA" /><input type="hidden" name="domains" value="www.w3.org/QA" /></p>
</form>
</div>


    <div id="main"><!-- This DIV encapsulates everything in this page - necessary for the positioning -->

                     <p class="content-nav">
                        <a href="http://www.w3.org/QA/2008/09/powdering_logos_again.html">&laquo; Powdering logos (again)</a> |
                        <a href="http://www.w3.org/QA/">Main</a>
                        | <a href="http://www.w3.org/QA/2008/09/learn-test-smil30.html">Learn about SMIL 3.0 and test it! &raquo;</a>
                     </p>

                        <h2 class="entry-header">How To Insert A Video From Youtube</h2>
                           <div class="entry-body">
                              <p>Youtube gives a way to insert a video in your pages. You can select a few options and the system gives you a piece of html code to insert in your Web page.</p>

<pre>
    &lt;object width="425" height="349"&gt;
        &lt;param name="movie" value="http://www.youtube.com/v/ZuNNhOEzJGA&hl=fr&fs=1&rel=0&color1=0x006699&color2=0x54abd6&border=1"&gt;&lt;/param&gt;
        &lt;param name="allowFullScreen" value="true"&gt;&lt;/param&gt;
        &lt;embed src="http://www.youtube.com/v/ZuNNhOEzJGA&hl=fr&fs=1&rel=0&color1=0x006699&color2=0x54abd6&border=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="349"&gt;&lt;/embed&gt;
    &lt;/object&gt;
</pre>

<p><code><a href="http://www.w3.org/TR/2008/WD-html5-20080610/embedded0.html#the-embed">embed</a></code> is an element which is part of HTML 5 Working Draft but not part of XHTML 1.0 or XHTML 1.1. The <code>embed</code> element in this example is a fallback of the object element. It says if the object element is not working, use the embed element. So I decided to just cut the embed element in the XHTML 1.1 page.</p>

<pre>
    &lt;object width="425" height="349"&gt;
        &lt;param name="movie" value="http://www.youtube.com/v/ZuNNhOEzJGA&amp;hl=fr&amp;fs=1&amp;rel=0&amp;color1=0x006699&amp;color2=0x54abd6&amp;border=1"&gt;&lt;/param&gt;
        &lt;param name="allowFullScreen" value="true"&gt;&lt;/param&gt;
    &lt;/object&gt;
</pre>

<p>The code stopped working. The video was not displayed at all in the page. It probably means that the <code>object</code> element has no effect at all and <code>embed</code> is always triggered. So I started to explore what was missing. First, the <code>param</code> element is an empty element, so there is no need for a closing element.</p>

<p>Then I moved the information in the <code>param</code> element to the <code>object</code> element. And finally I added a textual information about the content of the video in case the video would not work properly.</p>

<pre>
  &lt;object width="425" height="349"
        type="application/x-shockwave-flash"
        data="http://www.youtube.com/v/ZuNNhOEzJGA&amp;hl=fr&amp;fs=1&amp;rel=0&amp;color1=0x006699&amp;color2=0x54abd6&amp;border=1&quot;&gt;
         &lt;param name="movie" value="http://www.youtube.com/v/ZuNNhOEzJGA&amp;hl=fr&amp;fs=1&amp;rel=0&amp;color1=0x006699&amp;color2=0x54abd6&amp;border=1"/&gt;
        &lt;p&gt;Interview of Philippe Le Hégaret about Video codec&lt;/p&gt;
    &lt;/object&gt;
</pre>


<p>I finally tested it in <strong>Camino</strong> (Version 1.6.1Int-v2 (1.8.1.14 2008051211)), <strong>Opera</strong> (9.52, Révision 4916), <strong>Firefox</strong> (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; fr; rv:1.9.0.1) Gecko/2008070206 Firefox/3.0.1), and <strong>Safari</strong> (Version 3.1.2 (5525.20.1)) and it worked well.</p>

<pre>
&lt;object width="425" height="349" type="application/x-shockwave-flash" data="http://www.youtube.com/v/ZuNNhOEzJGA&amp;hl=fr&amp;fs=1&amp;rel=0&amp;color1=0x006699&amp;color2=0x54abd6&amp;border=1"&gt;
&lt;p&gt;Interview of Philippe Le Hégaret about Video codec&lt;/p&gt;
&lt;param name="movie" value="http://www.youtube.com/v/ZuNNhOEzJGA&amp;hl=fr&amp;fs=1&amp;rel=0&amp;color1=0x006699&amp;color2=0x54abd6&amp;border=1" /&gt;
&lt;/object&gt;
</pre>

<p>Which renders as follows:</p>

<object width="425" height="349" type="application/x-shockwave-flash" data="http://www.youtube.com/v/ZuNNhOEzJGA&amp;hl=fr&amp;fs=1&amp;rel=0&amp;color1=0x006699&amp;color2=0x54abd6&amp;border=1">
<p>Interview of Philippe Le Hégaret about Video codec</p>
<param name="movie" value="http://www.youtube.com/v/ZuNNhOEzJGA&amp;hl=fr&amp;fs=1&amp;rel=0&amp;color1=0x006699&amp;color2=0x54abd6&amp;border=1" />
</object>


                           </div>
                           <div id="more" class="entry-more">

                           </div>
                       <p class="postinfo">Filed by <a href="http://www.w3.org/People/karl/">Karl Dubost</a> on September  8, 2008  1:50 AM in <a href="http://www.w3.org/QA/archive/technology/html/">HTML</a>, <a href="http://www.w3.org/QA/archive/w3cqa_news/technology_101/">Technology 101</a>, <a href="http://www.w3.org/QA/archive/technology/video/">Video</a><br />
<span class="separator">|</span> <a class="permalink" href="http://www.w3.org/QA/2008/09/howto-insert-youtube-video.html">Permalink</a>
                                 | <a href="http://www.w3.org/QA/2008/09/howto-insert-youtube-video.html#comments">Comments (40)</a>
                                 | <a href="http://www.w3.org/QA/2008/09/howto-insert-youtube-video.html#trackback">TrackBacks (0)</a>
</p>


<h3 class="comments-header" id="comments">Comments</h3>
<div class="comment" id="comment-165265">
<p class="comment-meta" id="c165265">
<span class="comment-meta-author"><strong>Frankie Roberto </strong></span>
<span class="comment-meta-date"><a href="#c165265">#</a> 2008-09-08</span>
</p>
<div class="comment-bulk">
<p>Not IE though, eh?</p>

</div>
</div>


<div class="comment" id="comment-165272">
<p class="comment-meta" id="c165272">
<span class="comment-meta-author"><strong>Jordan Clark </strong></span>
<span class="comment-meta-date"><a href="#c165272">#</a> 2008-09-08</span>
</p>
<div class="comment-bulk">
<p>Unfortunately, this example does not work in <strong>Internet Explorer 7</strong> (<em>what a surprise!</em>). To top it off, the page stops loading at the point of the object element in the markup, without even rendering the fallback content (or <em>anything else</em> in the page, for that matter!).</p>

<p>It's ridiculous to think that in 2008, after nearly 9 years, Microsoft's current browser doesn't support the HTML 4 spec properly!</p>

<p>Anyone know how IE8 handles this?</p>

</div>
</div>


<div class="comment" id="comment-165303">
<p class="comment-meta" id="c165303">
<span class="comment-meta-author"><strong>Toby Inkster </strong></span>
<span class="comment-meta-date"><a href="#c165303">#</a> 2008-09-08</span>
</p>
<div class="comment-bulk">
<p>You will probably be able to restore IE support by adding the param element with name="movie" back in.</p>

</div>
</div>


<div class="comment" id="comment-165337">
<p class="comment-meta" id="c165337">
<span class="comment-meta-author"><strong>zcorpan </strong></span>
<span class="comment-meta-date"><a href="#c165337">#</a> 2008-09-08</span>
</p>
<div class="comment-bulk">
<p>Isn't the fallback you've used actually a caption for the video that would be useful even if the video worked?</p>

</div>
</div>


<div class="comment" id="comment-165340">
<p class="comment-meta" id="c165340">
<span class="comment-meta-author"><strong>S </strong></span>
<span class="comment-meta-date"><a href="#c165340">#</a> 2008-09-08</span>
</p>
<div class="comment-bulk">
<p>You should test it in Google Chrome and see how it turns out.</p>

</div>
</div>


<div class="comment" id="comment-165353">
<p class="comment-meta" id="c165353">
<span class="comment-meta-author"><strong>John Dowdell </strong></span>
<span class="comment-meta-date"><a href="#c165353">#</a> 2008-09-08</span>
</p>
<div class="comment-bulk">
<p>Yup, specs have had a sketchy relationship with reality.... ;-)</p>

<p>When Netscape introduced browser scripting, it also introduced open rendering through plugins. This was invoked by the EMBED tag. Microsoft later had a parallel scheme, using ActiveX Controls and the OBJECT tag. W3C later blessed OBJECT and damned EMBED. </p>

<p>I asked repeatedly at the time, but no one really seemed to discuss what would happen with realworld content, realworld webpages, when EMBED was told to hie thee hence. </p>

<p>Now EMBED's back. Go figure. ;-)</p>

<p>Out in the real world, we start by looking at the engines a site's audience currently uses, and how to display to them. A few years back Drew McClellan tested how then-current browsers did with simple plugin visibility with OBJECT, but didn't check what that did with non-rectangular windows, layering, printing, JavaScript/plugin intercommunication, etc. </p>

<p>Simple specs without U-turns tend to work most smoothly....</p>

<p>jd/adobe</p>

</div>
</div>


<div class="comment" id="comment-165385">
<p class="comment-meta" id="c165385">
<span class="comment-meta-author"><strong>Karl Dubost <a class="commenter-profile" href="http://www.w3.org/People/karl/"><img alt="Author Profile Page" src="http://www.w3.org/QA/sununga/mt-static/images/comment/mt_logo.png" width="16" height="16" /></a></strong></span>
<span class="comment-meta-date"><a href="#c165385">#</a> 2008-09-09</span>
</p>
<div class="comment-bulk">
<p>I don't have access to Google Chrome but if someone can describe if there are issues, please feel free to do so. Thanks.</p>

</div>
</div>


<div class="comment" id="comment-165386">
<p class="comment-meta" id="c165386">
<span class="comment-meta-author"><strong>Karl Dubost <a class="commenter-profile" href="http://www.w3.org/People/karl/"><img alt="Author Profile Page" src="http://www.w3.org/QA/sununga/mt-static/images/comment/mt_logo.png" width="16" height="16" /></a></strong></span>
<span class="comment-meta-date"><a href="#c165386">#</a> 2008-09-09</span>
</p>
<div class="comment-bulk">
<p>@zcorpan. I guess, there should be plenty of more clever fallback than the one I have given here. What would you suggest?</p>

</div>
</div>


<div class="comment" id="comment-165387">
<p class="comment-meta" id="c165387">
<span class="comment-meta-author"><strong>Karl Dubost <a class="commenter-profile" href="http://www.w3.org/People/karl/"><img alt="Author Profile Page" src="http://www.w3.org/QA/sununga/mt-static/images/comment/mt_logo.png" width="16" height="16" /></a></strong></span>
<span class="comment-meta-date"><a href="#c165387">#</a> 2008-09-09</span>
</p>
<div class="comment-bulk">
<p>@Toby: does it work with IE8 beta2. I have no access to IE but I have read that they started to fix the object element. I don't know to which extent. I will fix the param for movie. Thanks.</p>

</div>
</div>


<div class="comment" id="comment-165514">
<p class="comment-meta" id="c165514">
<span class="comment-meta-author"><strong>Liam Morland </strong></span>
<span class="comment-meta-date"><a href="#c165514">#</a> 2008-09-10</span>
</p>
<div class="comment-bulk">
<p>It works in Google Chrome.</p>

<p>IE8b2 works only if the movie param exists and the &quot; entity is replaced with a quote character (see the data attribute). It continues to work in "Browser Mode: IE7", which is supposed to emulate IE7.</p>

<p>In IE6, the Flash Player plugin loads, but the movie does not. The method works for a local SWF file, but not for a video from YouTube. Even YouTube's suggested embedding code doesn't work in IE6.</p>

<p>If only I lived in a world where I could ignore IE. I could go home early every day! (But let's not loose site of how far we've come. I stumbled upon an article at <i>A List Apart</i> from many years ago that praised the high level of standards compliance in IE5.5!)</p>

<p>The article "<a href="http://www.alistapart.com/articles/flashembedcagematch/" rel="nofollow">Flash Embedding Cage Match</a>" from <i>A List Apart</i> goes through many issues relating to Flash embedding. Their solution to the various compatibility issues is to use DOM scripting (<a href="http://code.google.com/p/swfobject/" rel="nofollow">SWFObject 2</a> came out of the process that followed that article). </p>

<p>It seems to me that the best fall-back content would be a transcript of the movie. Unfortunately, the effort required to create that is large.</p>

</div>
</div>


<div class="comment" id="comment-165579">
<p class="comment-meta" id="c165579">
<span class="comment-meta-author"><strong>Karl Dubost <a class="commenter-profile" href="http://www.w3.org/People/karl/"><img alt="Author Profile Page" src="http://www.w3.org/QA/sununga/mt-static/images/comment/mt_logo.png" width="16" height="16" /></a></strong></span>
<span class="comment-meta-date"><a href="#c165579">#</a> 2008-09-11</span>
</p>
<div class="comment-bulk">
<p>Thanks Liam! That is super useful information. </p>

</div>
</div>


<div class="comment" id="comment-168025">
<p class="comment-meta" id="c168025">
<span class="comment-meta-author"><strong>Martin Regtien </strong></span>
<span class="comment-meta-date"><a href="#c168025">#</a> 2008-10-30</span>
</p>
<div class="comment-bulk">
<p>I'm trying to get my websites optimized for Windows Mobile platforms as well when I switch from MAmbo to Joomla.
Any pitfalls I should be aware of getting YouTube videos embedded on my sites?</p>

</div>
</div>


<div class="comment" id="comment-168037">
<p class="comment-meta" id="c168037">
<span class="comment-meta-author"><strong>Tammy Powell </strong></span>
<span class="comment-meta-date"><a href="#c168037">#</a> 2008-10-30</span>
</p>
<div class="comment-bulk">
<p>Liam - your comment providing the info on flash embedding is great, was looking for more info and will give it a shot in Google Chrome.</p>

</div>
</div>


<div class="comment" id="comment-170323">
<p class="comment-meta" id="c170323">
<span class="comment-meta-author"><strong>butter </strong></span>
<span class="comment-meta-date"><a href="#c170323">#</a> 2008-12-16</span>
</p>
<div class="comment-bulk">
<p>thanxs 1st of all to make it simple.    helped me a lot .  u willfind a lots of vides now  i  wiill put it up here at <a href="http://bigtechnical.com/" rel="nofollow">Big Technical</a></p>

</div>
</div>


<div class="comment" id="comment-172784">
<p class="comment-meta" id="c172784">
<span class="comment-meta-author"><strong>Brian </strong></span>
<span class="comment-meta-date"><a href="#c172784">#</a> 2009-01-31</span>
</p>
<div class="comment-bulk">
<p>Hi there, thank you very much for this. I had it down to 7 errors on my page and with your help, my page now validates! </p>

<p>I have only checked with Firefox and IE7, but it works fine with these two browsers. Once again, many thanks, Brian</p>

</div>
</div>


<div class="comment" id="comment-173591">
<p class="comment-meta" id="c173591">
<span class="comment-meta-author"><strong>wdalhaj </strong></span>
<span class="comment-meta-date"><a href="#c173591">#</a> 2009-02-26</span>
</p>
<div class="comment-bulk">
<p>Not working with IE 8.0.6001</p>

</div>
</div>


<div class="comment" id="comment-180131">
<p class="comment-meta" id="c180131">
<span class="comment-meta-author"><strong>Matt </strong></span>
<span class="comment-meta-date"><a href="#c180131">#</a> 2009-03-25</span>
</p>
<div class="comment-bulk">
<p>Doesn't seem to be working in Firefox 3.1 beta 2 either :(</p>

</div>
</div>


<div class="comment" id="comment-180559">
<p class="comment-meta" id="c180559">
<span class="comment-meta-author"><strong>Tubene </strong></span>
<span class="comment-meta-date"><a href="#c180559">#</a> 2009-03-27</span>
</p>
<div class="comment-bulk">
<p>Work Perfect in FireFox. thank you so much for sharing!</p>

</div>
</div>


<div class="comment" id="comment-181139">
<p class="comment-meta" id="c181139">
<span class="comment-meta-author"><strong>James </strong></span>
<span class="comment-meta-date"><a href="#c181139">#</a> 2009-04-30</span>
</p>
<div class="comment-bulk">
<p>I find this works well with Opera also.  Thanks for sharing</p>

</div>
</div>


<div class="comment" id="comment-181692">
<p class="comment-meta" id="c181692">
<span class="comment-meta-author"><strong>counterservice </strong></span>
<span class="comment-meta-date"><a href="#c181692">#</a> 2009-05-16</span>
</p>
<div class="comment-bulk">
<p>I find this works well with Opera also, i will use in my website.
thank you very much.</p>

</div>
</div>


<div class="comment" id="comment-182312">
<p class="comment-meta" id="c182312">
<span class="comment-meta-author"><strong>Spinal Stenosis </strong></span>
<span class="comment-meta-date"><a href="#c182312">#</a> 2009-06-07</span>
</p>
<div class="comment-bulk">
<p>Working like a charm! I was looking for a simple way to embede some videos into my website.</p>

<p>Thanks!</p>

</div>
</div>


<div class="comment" id="comment-183674">
<p class="comment-meta" id="c183674">
<span class="comment-meta-author"><strong>Call Center Outsourcing </strong></span>
<span class="comment-meta-date"><a href="#c183674">#</a> 2009-09-24</span>
</p>
<div class="comment-bulk">
<p>This is really very simple and extremely useful. it is working great. thanks</p>

</div>
</div>


<div class="comment" id="comment-183934">
<p class="comment-meta" id="c183934">
<span class="comment-meta-author"><strong>Naveed </strong></span>
<span class="comment-meta-date"><a href="#c183934">#</a> 2009-10-05</span>
</p>
<div class="comment-bulk">
<p>Yes working perfectly, but I dont care about other browsers as long as it is running smoothly in Firefox.</p>

</div>
</div>


<div class="comment" id="comment-184087">
<p class="comment-meta" id="c184087">
<span class="comment-meta-author"><strong>bambo </strong></span>
<span class="comment-meta-date"><a href="#c184087">#</a> 2009-10-12</span>
</p>
<div class="comment-bulk">
<p>thank you. It very uesful information for me.</p>

</div>
</div>


<div class="comment" id="comment-185459">
<p class="comment-meta" id="c185459">
<span class="comment-meta-author"><strong>Michael </strong></span>
<span class="comment-meta-date"><a href="#c185459">#</a> 2009-12-16</span>
</p>
<div class="comment-bulk">
<p>This is pretty useful tip.. thank you so much for your help.</p>

<p>Michael
Internet Marketing Agency</p>

</div>
</div>


<div class="comment" id="comment-186172">
<p class="comment-meta" id="c186172">
<span class="comment-meta-author"><strong>Tony Q King </strong></span>
<span class="comment-meta-date"><a href="#c186172">#</a> 2010-01-16</span>
</p>
<div class="comment-bulk">
<p>Yup! It works GREAT!
In IE, FF and Chrome-3. Will check Safari soon...</p>

<p>For the last few years I was basically using javascript's document.write("embed ...")  to cheat my way around the XHTML W3C validator.
Now I can say goodbye to embed - at least for the time being... </p>

<p>Now- if we can somehow get Google to get rid of Adsense's use of TARGET and other depreciated/invalid syntax!  Grrrr!  </p>

</div>
</div>


<div class="comment" id="comment-186259">
<p class="comment-meta" id="c186259">
<span class="comment-meta-author"><strong>Mohsin </strong></span>
<span class="comment-meta-date"><a href="#c186259">#</a> 2010-01-20</span>
</p>
<div class="comment-bulk">
<p>Thanks For this Post.. From a long time i am confused how to insert a video and this helps me a lot...</p>

</div>
</div>


<div class="comment" id="comment-186688">
<p class="comment-meta" id="c186688">
<span class="comment-meta-author"><strong>Maria </strong></span>
<span class="comment-meta-date"><a href="#c186688">#</a> 2010-02-07</span>
</p>
<div class="comment-bulk">
<p>Extremely useful information! Explanation is simple and clear so that everyone can understand it. Thank you:) </p>

</div>
</div>


<div class="comment" id="comment-186814">
<p class="comment-meta" id="c186814">
<span class="comment-meta-author"><strong>jhndnl2012 </strong></span>
<span class="comment-meta-date"><a href="#c186814">#</a> 2010-02-12</span>
</p>
<div class="comment-bulk">
<p>Thanks for the information I was looking for it. Now I can insert my videos. Thanks once again. Keep up the good work.</p>

</div>
</div>


<div class="comment" id="comment-186947">
<p class="comment-meta" id="c186947">
<span class="comment-meta-author"><strong>Ritu Raj Mishra </strong></span>
<span class="comment-meta-date"><a href="#c186947">#</a> 2010-02-16</span>
</p>
<div class="comment-bulk">
<p>Ok it is good knowing how to insert videos, but doesn't it  make the page very heavy due to lot of code?</p>

<p>Are there any other simple methods</p>

</div>
</div>


<div class="comment" id="comment-189617">
<p class="comment-meta" id="c189617">
<span class="comment-meta-author"><strong>David Winch </strong></span>
<span class="comment-meta-date"><a href="#c189617">#</a> 2010-04-12</span>
</p>
<div class="comment-bulk">
<p>Thanks for the steer on how to make the YouTube embed code W3C compliant.  The following compliant code displays correctly on IE 8.0.6001.18702, Firefox 3.6.3 and Chrome 4.1.249.1045</p>

<pre>
&lt;object width="346" height="280" type="application/x-shockwave-flash" data="http://www.youtube.com/v/redacted"&gt;&lt;param name="movie" value="http://www.youtube.com/v/redacted"&gt;&lt;/param&gt;&lt;param name="allowFullScreen" value="true"&gt;&lt;/param&gt;&lt;param name="allowscriptaccess" value="always"&gt;&lt;/param&gt;&lt;/object&gt;
</pre>

<p>This doesn't seem too 'heavy' to me.</p>

</div>
</div>


<div class="comment" id="comment-190168">
<p class="comment-meta" id="c190168">
<span class="comment-meta-author"><strong>Angelverde </strong></span>
<span class="comment-meta-date"><a href="#c190168">#</a> 2010-04-20</span>
</p>
<div class="comment-bulk">
<p>Gracias, funciona!</p>

</div>
</div>


<div class="comment" id="comment-202025">
<p class="comment-meta" id="c202025">
<span class="comment-meta-author"><strong>NuDigitalMedia </strong></span>
<span class="comment-meta-date"><a href="#c202025">#</a> 2010-10-02</span>
</p>
<div class="comment-bulk">
<p>Thank you for the information about video and embed codes. I cant tell you how informative your website is. I know use these tools on all of our social media. </p>

</div>
</div>


<div class="comment" id="comment-204330">
<p class="comment-meta" id="c204330">
<span class="comment-meta-author"><strong>johnson </strong></span>
<span class="comment-meta-date"><a href="#c204330">#</a> 2010-10-27</span>
</p>
<div class="comment-bulk">
<p>Thanks For this Post.. From a long time i am confused how to insert a video and this helps me a lot...</p>

</div>
</div>


<div class="comment" id="comment-208655">
<p class="comment-meta" id="c208655">
<span class="comment-meta-author"><strong>palmiye </strong></span>
<span class="comment-meta-date"><a href="#c208655">#</a> 2010-12-16</span>
</p>
<div class="comment-bulk">
<p>Thanks For this Post.. From a long time i am confused how to insert a video and this helps me a lot..</p>

</div>
</div>


<div class="comment" id="comment-211781">
<p class="comment-meta" id="c211781">
<span class="comment-meta-author"><strong>кран балка </strong></span>
<span class="comment-meta-date"><a href="#c211781">#</a> 2011-01-29</span>
</p>
<div class="comment-bulk">
<p>I am so impressed I had to save it so I continously go back and read things I may have skimmed</p>

</div>
</div>


<div class="comment" id="comment-228356">
<p class="comment-meta" id="c228356">
<span class="comment-meta-author"><strong>david compa </strong></span>
<span class="comment-meta-date"><a href="#c228356">#</a> 2011-05-23</span>
</p>
<div class="comment-bulk">
<p>Thanks For this Post</p>

</div>
</div>


<div class="comment" id="comment-380109">
<p class="comment-meta" id="c380109">
<span class="comment-meta-author"><strong>Karlene Bellize </strong></span>
<span class="comment-meta-date"><a href="#c380109">#</a> 2011-09-06</span>
</p>
<div class="comment-bulk">
<p>Nice post, dude!
I am using Google Chrome, and it runs perfectly....</p>

</div>
</div>


<div class="comment" id="comment-829982">
<p class="comment-meta" id="c829982">
<span class="comment-meta-author"><strong>Donald Fratt </strong></span>
<span class="comment-meta-date"><a href="#c829982">#</a> 2011-11-22</span>
</p>
<div class="comment-bulk">
<p>Wow, I wanted to put some YouTube videos on my site and validate XHTML 1.1 Strict.  This works fine on Chrome, Safari, Firefox, Opera and then I tested IE.  There I had to update to the latest Flash player and, yeah, it works across the board.  I will play with David Winch's suggestion tomorrow night, but the boss (my wife) is happy to get it the cats and dogs videos working on her website!  Thanks a bunch!</p>

</div>
</div>


<div class="comment" id="comment-832603">
<p class="comment-meta" id="c832603">
<span class="comment-meta-author"><strong>Donald Fratt </strong></span>
<span class="comment-meta-date"><a href="#c832603">#</a> 2011-11-22</span>
</p>
<div class="comment-bulk">
<p>Kudos to David too!  Tried his snippet and all is just fine!  Thanks guys, you are the best!</p>

</div>
</div>


  <div class="comments-open" id="comments-open">
<h3 class="comments-open-header">Leave a comment</h3>

<div class="comments-open-moderated">
   <p>
   Note: this blog is intended to foster <strong>polite
   on-topic discussions</strong>. Comments failing these
   requirements and spam will not get published. Please,
   enter your real name and email address. Every
   individual comment is reviewed by the W3C staff.
   This may take some time, thank you for your patience.
   </p>
   <p>
   You can use the following HTML markup (a href, b, i,
   br/, p, strong, em, ul, ol, li, blockquote, pre)
   and/or <a href="http://daringfireball.net/projects/markdown/syntax">Markdown syntax</a>.</p>
</div>

<div id="comments-open-data">
<form method="post" action="http://www.w3.org/QA/sununga/beach.pl" id="comments-form">
<h4>Your comment</h4>
<div id="comments-open-text">
  <textarea id="comment-text" name="text" rows="20" cols="100"></textarea><br />
<label for="comment-text">Write your comment text here. Remember, keep the discussion on topic and courteous.</label>
</div>

<h4>About you</h4>
<div id="comment-form-name">
  <input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="227" />
<input type="hidden" name="__lang" value="en" />
<label for="comment-author">Your Name</label>
<input id="comment-author" name="author" size="30" value="" />
</div>
<div id="comment-form-email">
<label for="comment-email">Your Email Address</label>
<input id="comment-email" name="email" size="30" value="" />
</div>

<div id="comments-open-footer">
<input type="submit" accesskey="s" name="post" id="comment-submit" value="Submit" />

</div>
</form>
</div>
</div>


<p id="gentime">This page was last generated on $Date: 2011/12/16 03:03:02 $</p>

      </div><!-- End of "main" DIV. -->

<address>

This blog is written by W3C staff and working group participants,<br />
&nbsp;and maintained by <a href="/People/CMercier/">Coralie Mercier</a>.<br />
Authorized parties may <a href="/QA/new">log in</a> to create a new entry.<br/>
<span id="poweredby">Powered by Movable Type, magpierss and a lot of Web Technology</span>
    </address>


    <p class="copyright">
      <a rel="Copyright" href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> &copy; 1994-2011
      <a href="http://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a>&reg;
      (<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>,
      <a href="http://www.ercim.eu/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
      <a href="http://www.keio.ac.jp/">Keio</a>),
      All Rights Reserved.
      W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
      <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>,
      <a rel="Copyright" href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a>
      and <a rel="Copyright" href="http://www.w3.org/Consortium/Legal/copyright-software">software licensing</a>
      rules apply. Your interactions with this site are in accordance
      with our <a href="http://www.w3.org/Consortium/Legal/privacy-statement#Public">public</a> and
      <a href="http://www.w3.org/Consortium/Legal/privacy-statement#Members">Member</a> privacy
      statements.
    </p>

  </body>
</html>