Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Build a Responsive Website Advanced Techniques Flexible Videos with FitVids.js

Posted by VeryFake Name
VeryFake Name
Courses Plus Student 513 Points

Video HTML5 element vs iframe

What's the use of the element <video> if we don't use it, in the video she used the <iframe>, And how to decide if we can use <video> or <iframe> ? please help.

Jacobus Hindson
Jacobus Hindson
14,429 Points
Jacobus Hindson
Jacobus Hindson
14,429 Points

Hey VeryFake!

<video> is a HTML5 object type and will give you the advantage of quicker load times on your page, the trade off is it has less compatibility than <iframe>, you cannot be 100% sure that your viewers will be using HTML5.

Courtesy of W3C:

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <video> element.

Note: Internet Explorer 8 and earlier versions, do not support the <video> element.

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi VeryFake Name ,

It's not really an issue or a choice between the html5 video element <video> and an <iframe> They do 2 different things.

The video element allows a browser to play a video natively, as opposed to a plugin like flash, an iframe allows you to load the source of another url into your page.

In this video here from the course, the iframe is not playing the video. It's only loading a url which contains code that is playing the video.

The reason an iframe was used is because that video was being hosted on vimeo and the iframe code is required in order to embed the vimeo video onto your own web page. So the iframe isn't responsible for playing the video but rather it's responsible for loading the source of a vimeo url onto your own page. That source that is inside the iframe will either contain an object/embed code for flash or it might contain the html5 video element depending on what browser you're using.

You'll be able to see this if you use your browser dev tools to inspect the html. You can drill down into the iframe and eventually find the actual code that's playing the video.

You'll likely use an <iframe> when you need to embed a video that is hosted on another site onto your own web page. Sites like vimeo and youtube.

You'll use the html5 video element, and possibly a flash fallback, when you are hosting your own videos.

Treehouse recently released html video and audio which you may want to check out.

Blake Hutchinson
Blake Hutchinson
21,695 Points

Jason is correct. I just watched a video on Vimeo the other day and when you click on share, this is the code they give you to copy.

<iframe src="//player.vimeo.com/video/109832468" width="500" height="375"
frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<!-- Extra code they give you -->
<p><a href="http://vimeo.com/109832468">Tiny apartment in Paris (8sqm only)</a>
from <a href="http://vimeo.com/user29684126">Kitoko Studio</a> on 
<a href="https://vimeo.com">Vimeo</a>.</p>
Blake Hutchinson
Blake Hutchinson
21,695 Points
Blake Hutchinson
Blake Hutchinson
21,695 Points

If a browser doesn't recognize the HTML5 video tag, then one can upload a Flash swf file and point to it in the src attribute in the embed tag, which is embedded in the video tag itself.

<video width="{#}" height="{#}" controls>
  <source src="{ogg_file}.ogg" type="video/ogg" />  
  <source src="{mp4_file}.mp4" type="video/mp4" />  

  <!-- The fallback in case the browser doesn't recognize the HTML5 video tag -->  
  <embed src="{flash_swf_file}.swf" type="application/x-shockwave-flash" width="{#}" height="{#}"></embed>  
</video>

The iframe tag loads a page within an existing page. Maybe they wanted to have the video on a separate page specified by the iframe tag. Anytime you use an iframe, consider using this code in your CSS file because otherwise some browsers will show the box lines where the iframe is.

iframe[seamless] {
    background-color: transparent;
    border: 0px none transparent;
    padding: 0px;
    overflow: hidden;
}

For the CSS code to work, seamless has to be included at the end of the opening iframe tag.

<div><iframe src="{page_name}.html" height="{#}" width="{#}" seamless></iframe></div>