Menu
I'm debating whether or not to store a video on my server and call it through an HTML5 tag, or upload the video onto YouTube and use an iframe to embed the YouTube link. I'm not sure which would work more efficiently, or the differences between each one. What are the differences between using a HTML5 video tag and using a YouTube link and iframe tag?
612
EMBED is basically the same as IFRAME, only with fewer attributes. Formally, EMBED is an HTML 5 tag, but on several browsers it will also work for HTML 4.01, if you are using this. It just cannot be validated. As always HTML 5 is recommended for the pages.
Embed a video or playlist On a computer, go to the YouTube video or playlist you want to embed. From the list of Share options, click Embed. From the box that appears, copy the HTML code. Paste the code into your website HTML.
An inline frame (iframe) is a HTML element that loads another HTML page within the document. It essentially puts another webpage within the parent page. They are commonly used for advertisements, embedded videos, web analytics and interactive content.
<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. Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <video> element.
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.
These tags are allowed in HTML5 to load external "plugin" content, but they are confusingly similar in functionality. Bottom line up-front, the <iframe> is actually more commonly used by vendors such as Youtube and Spotify (see below for details), but I've found the following pattern acceptable for SVG and PDFs.
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.
Using a self-hosted video with HTML5
Advantages:
Disadvantages:
Recommended Usage:
Use a javascript plugin like https://plyr.io/ which will help with cross-browser and responsive concerns. Serve the video from a CDN if possible
Youtube Hosted
Advantages:
Disadvantages:
Recommended Usage: Use iframe embed code provided by youtube. For responsive assistance, see http://embedresponsively.com/. Also plyr.io allows you to play YouTube videos.
124
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
