YouTube, Vimeo, HTML5 Responsive video Embed with CSS

What is Responsive Web Design? Responsive Web Design is an approach to web design aimed at allowing desktop web pages to be viewed in response to the size of the screen or web browser one is viewing with. A site designed with Responsive Web Design adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule, in the following ways –

  • The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.
  • Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
  • Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.

Responsive web design has become more important as the amount of mobile traffic now accounts for more than half of total internet traffic. Therefore, Google announced Mobilegeddon in 2015 and started to boost the ratings of sites that are mobile friendly if the search was made from a mobile device. Responsive web design is an example of user interface plasticity. [Source: Wikipedia]

In short, Responsive Web Design means, web pages respond automatically according to your device screen size.

Now let’s get back to our today’s discussion. Today we are going to discuss how to embed an HTML5 Video player or third-party video player like YouTube, Vimeo in your web page and how you make them responsive.

Accessing internet rate is increasing day by day and video content become more popular. In this modern era, the mobile device is also popular and many people accessing their internet on their device. So nowadays it is most important to give the best mobile user experience for your website.

YouTube, Vimeo, HTML5 Responsive video Embed with CSS

YouTube, Vimeo, HTML5 Responsive video Embed with CSS

Responsive Video YouTube

YouTube is a most popular video content platform. You can easily store your own video on your channel and can embed this to your website with an iframe. This is more easy to integrate into your web page. Let’s see the following example –

HTML

Here we just add an iframe with the source of youtube video link and wrapped it to a div with a class named embedded-video. This is so simple.

CSS

Now adding the following CSS code and apply to your youtube-video class. This is simple also.

We applied our class on a div element and this element takes 100% width by default. So we got the horizontal responsiveness by default. Now we need to make it responsive proportionally according to the video ratio with a hidden overflow that set a relative height. We set the padding-bottom to 67.5% to support standard video (ratio is 4:3)

To get the support of widescreen video (16:9) we need to adjust the padding-bottom value to 56.34%.

See the Pen YouTube, Vimeo, HTML5 Responsive video Embed with CSS by Pavel (@bdpavel) on CodePen.0

Responsive Video Vimeo

Vimeo is also a most popular video content platform. You can also set the Vimeo player by iframe with the following HTML.

HTML

Wrapped our iframe into a div with the external-video class.

CSS

All CSS codes are same. But we need to add another class Vimeo and set the padding-top value to zero because of Vimeo video is slightly different from a youtube video.

Responsive Video HTML5

You can add and play your own video file in HTML5 video player. Using videotag and it’s attributed, you can make a powerful video player.

HTML

Create a video content by video tag in a div.

CSS

The most simple trick to make your HTML5 video responsive, just applying the width and max-height to your video tag and set both values to 100%. That’s it.

We shared pen to show how that code works. You can easily use the source code to your own website.

Happy Embedding

Happy Embedding