How to update HTML5 Video to latest Version

How to update HTML5 Video to latest version

When I release a newer version of the HTML5 Video plugin, it’s very easy to update. In this short video I show you exactly what to do (two ways to update in fact).

Make videos Responsive: solutions for IFrames and HTML5

There are different ways to display videos on your website. You can host and present videos yourself with an HTML5 <video> tag . In many cases you use services such as Youtube or Vimeo to embed videos with an IFrame (embed code) on your website. But what if your website is responsive? Does your video scale to smaller screens automatically?

The IFrame problem
Twitter, Facebook and Soundcloud have made their embed code responsive. Unfortunately, this does not apply to YouTube, Vimeo, Google Maps or Instagram. They use the IFrame as embed code. In this code you assume a static width and height:

<iframe width = “560 ″ height =” 315 ″ src = “// www.youtube.com/embed/UKX0ztogZkM?rel=0 ″ frameborder =” 0 ″ allowfullscreen> </iframe>

The video does not automatically scale with the screen size. The height and width are mandatory conditions. If you do not enter the height, your browser will indicate an automatic height of 150px. As a result, part of the video is lost. How do you ensure that a video smoothly adjusts to the size of the screen? Read some solutions for a smooth motion of videos in a responsive website.

Responsive videos solutions HTML5 and IFrames

HTML5
Do you use the HTML5 video element? Then a smooth movement is easy. The developer solves this in the style sheet (CSS3). You indicate the width in the video container as a percentage and the height adjusts accordingly.

video {max-width: 100%; height: auto;}

IFrames
This simple method in CSS3 does not apply to IFrames because of the static and mandatory height and width (iframe width = ”560 ″ height =” 315 ″) in the code. A few solutions to tackle these stubborn IFrames:

Media query: Jquery FitVid.js

With the media query FitVid.js you make videos responsive. The developer implements a piece of javascript on the website with special conditions to scale IFrames along with the rest of the website. Providers such as Youtube and Vimeo are added to the script. This solution can be implemented within every CMS.
Plugins (WordPress, Joomla!)
For open source cms such as WordPress or Joomla! There are special plugins for responsive videos. If you use such a cms then you install these handy plugins without any technical knowledge. Responsive Video Embeds and Responsive Video do the trick for WordPress. And in Joomla! make your videos responsive with AllVideos .
Embed Responsively: generate your responsive code online Ca
n’t find a developer and no plugin for your website? Then take a look at this handy online solution: Embed Responsively . No complicated scripts or installing plugins on your website. With this solution you generate the responsive code for YouTube, Vimeo, but also for Google Maps directly online. Very simple. Enter the YouTube URL and your responsive code will appear via the ’embed’ button. Paste this html code into your website and your video is responsive.
When constructing a new responsive website, explicitly ask how responsive videos, images , but also forms, for example, have been thought out and consider which solution best fits your website.

Leave a Reply

Your email address will not be published. Required fields are marked *