Working With Hyper Links in HTML - (Part 2 Embedding Content)

By: Daniel Imbellino
Updated: Feb 28, 2013

You can embed a Youtube video using an iframe in HTML:
Click on the share link below the video and then click embed to get the code for an iframe.
<iframe width="560" height="315" src="http://www.youtube.com/embed/WpfWIizrd6U" frameborder="0" allowfullscreen></iframe> </p>

Embedding Videos In HTML and HTML5:

With HTML 5 you can embed videos in your webpages using the "video" tag.
Ex: <video width="640" height="480" controls="controls">
<video src="video.mp4" type="video/mp4" />
<video src="movie.ogg" type="video/ogg" />
<video src="video.webm" type="video/webm" />
</video>

Embedding videos in HTML5 looks and sounds easy, but its fraught with problems really. For one, all of the major browsers support only a few video codecs, and you will have to use different codecs with different browsers as shown. Here is a list of browsers and their current Video CODEC compatibility:

Internet Explorer 9: MP4: HAS SUPPORT - WEBM: NO SUPPORT! - OGG: NO SUPPORT!
FIREFOX: MP4: NO SUPPORT! - WEBM: HAS SUPPORT - OGG: HAS SUPPORT
GOOGLE CHROME: MP4: HAS SUPPORT - WEBM: HAS SUPPORT - OGG: HAS SUPPORT
APPLE SAFARI: MP4: HAS SUPPORT - WEBM: NO SUPPORT! - OGG: NO SUPPORT!
OPERA 10.6+: MP4: NO SUPPORT! - WEBM: HAS SUPPORT - OGG: HAS SUPPORT

In order to use the video tag to embed a video in HTML5, you would have to have 4 separate conversions of a single video in order for that video to be displayed correctly in all major browsers. This is a serious problem since this would require alot more disk space and bandwidth to be allocated to a given website. Sites with alot of video content would have to store 4 videos for every one video they host! Also, only simple controls that cannot be tailored in much anyway are all that is available for each codec. HTML5 is a loser when it comes to web design. Its done nothing but teach people that it's ok to have errors in their code. Any seasoned web designer would frown upon this. Then again, web designers are just lazy these days altogether. Everyone and their grandmother seems to be building their websites with website design software, or using content management systems that create 2,500 lines of code for a single webpage, in which everything is wrapped in scripts that search engines cannot index. The problem is HTML5 allows for code errors, its too bad that what developers arent realizing is that the search engines don't allow for errors when it comes to your ranking! You will lose your page rank on most all major search engines if your code is sloppy. Another issue with embedding video in HTML5 is that the browser is relied upon to process the video content entirely. Atleast with flash, the plugin does a majority of the work displaying and processing video content, leaving the browsers resources to focus on overall presentation of content. Even youtube complained that HTML5 videos did nothing but lock up repeatedly despite not having any network bandwidth issues. The browser has to process and buffer the video to memory itself, and browsers just are not yet capable of providing this function. For the sake of simplicity, it makes more sense to stick with XHTML and Flash video until XHTML5 comes out sometime in 2013. XHTML5 will support the newer but not hardly implemented features of HTML5 along with the stricter, but more flexible XHTML.

To embed flash videos in your web pages:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,16,0"
width="775px" height="400px">
<param name="movie" value="farcry3E3.swf">
<param name="quality" value="high">
<param name="PLAY" value="false">
<param name="wmode" value="transparent">
<embed src="farcry3E3.swf" width="700px" height="550px" wmode="transparent" play="false" loop="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash">
</embed>
</object>

Notice we embedded the "farcry3E3.swf" file. You can link to an .SWF file as well by indicating a full URL with the http:// prefix and full address of a video
located somewhere across the web. If your shock wave flash file is located in another directory from where your HTML file is located then you will need to point to that files locations from withing your web page like so:
"game-videos/farcry3E3.swf".

How Do I Add Controls To My flash Video Files?
You need the Adobe Flash program itself. With Flash you can add controls to your videos. We will give an example of how to do this using Flash CS4: