Recording Studio Responsive Website Template Free Download
How to add responsive video to your website
The spider web design industry is evolving at a rapid pace. So, sometimes, we demand to adapt our blueprint and development techniques to account for new technologies.
Responsive web design (RWD) has get almost a necessity in our modernistic blueprint procedure. While it'southward growing and maturing fast, it's still in its infancy.
Take video. You would look that the embed codes we grab from YouTube or Vimeo would be responsive, just like our images. The code beneath is what YouTube provides for embedding videos into web pages; it's a pretty standard iframe.
<iframe width="560" tiptop="315" src=" HYPERLINK "http://www.youtube. com/embed/Gk_fLeK7Uk4" http://www.youtube.com/embed/Gk_fLeK7Uk4" frameborder="0" allowfullscreen></iframe> But, if nosotros put this markup into our HTML, the video will maintain a fixed width of 560px by 315px, regardless of the browser or device screen size. If we're working with native HTML5 video or an image, a uncomplicated ready would be to add together the post-obit CSS:
Iframe { width: 100%; peak:car; } Come across the tutorial files for a working example. Hither nosotros're targeting the iframe with a width of 100% to span our container and a height of auto. If you endeavour this for yourself, you'll notice that the video is total width, just the top doesn't follow the ratio. We tin set up this with a simple, pure CSS solution.
First, we will need to wrap our embed lawmaking in an actress HTML element, equally shown beneath. Add the following div container to your iframe.
<div form="video-container"> <iframe width="560" height="315" src=" HYPERLINK "http://www.youtube.com/embed/Gk_fLeK7Uk4" http://world wide web.youtube.com/embed/Gk_fLeK7Uk4" frameborder="0" allowfullscreen></iframe> </div> Next, we add the post-obit to our CSS file:
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: subconscious; } The video-container class that we wrapped around the iframe has some positioning and padding applied to it. Position relative will set the enclosed iframe, which is positioned absolutely, to the most relative parent container. Nosotros apply padding-top to fine-tune the position our video where we need information technology to be, depending on the design.
The padding-lesser percent is determined from the xvi:9 attribute ratio. If you carve up nine past 16, yous get 56.25%. Y'all'll discover we're using padding-bottom, superlative: 0 and overflow: subconscious. These are mainly Cyberspace Explorer fixes, which will assist our solution work across all browsers.
Now, we'll target the iframe, object and embed with the post-obit:
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; top: 100%; } Since we have positioned the frame to absolute, we volition set up top and left to 0. This will prepare the video to the pinnacle left corner of our container. You can tweak these settings to match your pattern.
Let's test our instance and see the results. Refer to the tutorial files for a working case.
We now have a fully fluid YouTube video embedded in our responsive design. This solution volition also piece of work with Vimeo (although it hasn't been tested on other vendors' platforms). This is extremely constructive, easily implemented and is also cross-browser-friendly.
JavaScript solutions
While our solution doesn't rely on JavaScript, at that place are other options that require the back up of JavaScript. Todd Motto's FluidVids.js is written in vanilla JavaScript. To get started, download it and add the JavaScript to your website.
Calculation a fallback
Sometimes, users may have JavaScript disabled, especially on some mobile devices. A simple fallback would exist the following:
iframe { max-width: 100%; } Some other popular JavaScript solution is FitVids.js, which is described as "a lightweight, easy-to-utilise jQuery plug-in for fluid width video embeds". FitVids was created by CSS-Tricks founder Chris Coyier and Paravel.
This volition work the aforementioned way every bit Todd Motto's FluidVids, relying on JavaScript. For case:
<script src="path/to/jquery.min.js"></script> <script src="path/to/jquery.fitvids.js"></script> <script> $(document).fix(function(){ // Target your .container, .wrapper, .post, etc. $("#thing-with-videos").fitVids(); }); </script> The website says, "This will wrap each video in a div.fluid-width-video-wrapper and utilize the necessary CSS. Subsequently the initial JavaScript call, it'due south all percentage-based CSS magic." FitVids currently supports YouTube, Vimeo, Blip.tv, Viddler and Kickstarter.
Add a custom video vendor
FitVids has an option to add a custom vendor. As detailed in the documentation, add the following to the JavaScript file:
$("#affair-with-videos").fitVids({ customSelector: "iframe[src^='http://mycoolvideosite.com'], iframe[src^='http://myviiids.com']"}); Determination
Responsive web design is nevertheless growing and will continue to do so. As spider web designers and developers, we need to make sure our content is accessible beyond all platforms, operating systems, browsers and devices. Sometimes nosotros need to go the extra mile to accomplish this. Simple solutions, like the ones described in this article, whether in JavaScript or CSS, are very piece of cake to implement and brand a huge deviation to our users. Equally applied science progresses, new easier-to-implement solutions will ascend, or even be baked into vendors' products. Until and then, we need to find workarounds. Every project is dissimilar, and then the solution you cull will depend on your goals.
Words: John Surdakowski
This article originally appeared in internet magazine issue 247.
Related articles
DOWNLOAD HERE
Posted by: richardsantogginly.blogspot.com
0 Comments