There are many various techniques you can use to embed external video files. Popular social networking communities like YouTube and Vimeo support embedded movie files right into your website. But it can be a hassle getting these videos to conform properly in mobile websites.
Now often times there isn’t much you can do about video playback on mobile devices. The iPhones and iPads do not support FLV/Flash video playback at all. So while you can still display the thumbnail image, it may not be possible to stream any video playback to users. However, when discussing other HTML5 solutions it is certainly possible to get mobile playback with your own tinkering.
Image Credit: Video Playback
I want to use this guide as a means for addressing mobile video embedding into HTML5 layouts. We can look at a few techniques for getting your videos to align properly within any responsive website design. Additionally feel free to check out some of the other resources listed here, as you may find them useful in future projects.
Wrapping Static CSS Containers
Now the quickest and easiest solution for responsive videos will come from open source codes. I will delve into a great snippet of JavaScript in the next segment. But for now let’s consider how responsive video embeds will actually function.
Since we may be using any type of HTML tags from iframes to embed to video, we need to ensure everything will have the same aspect ratio. This means setting the padding-bottom CSS property of a container element to a value based on the video display (56.25% for 16:9 videos). You can read more on this topic over at Anders blog post which also details how you can embed responsive SlideShare projects.
Now this technique isn’t anything brand new or groundbreaking. However it does illustrate that we can force external videos into perfect responsive designs without the need for JavaScript! This solution is an excellent fallback method when getting back to basics. Now I also think we should look deeper into a JS-based solution.
JavaScript and FitVids.JS
Aside from the natural HTML5 embed tags we do not see a lot of support for responsive 3rd party video. A new open source jQuery plugin named FitVids was released a little while ago and provides this exact functionality. Now the problem you may run into is when your visitors have JavaScript disabled. But it is fair to venture that any mobile browsers without JavaScript support may not do well with videos anyways.
You can read this great tutorial which delves a bit deeper into customizing the FitVids plugin. It allows you to embed any type of external videos from YouTube, Vimeo, Viddler, Blip.tv, and a list of other sources which will all respond according to exact ratio dimensions. You can accomplish this by adding a container div wrapped around each video, and then call the following line of code in your webpage.
$(".vidswrap").fitVids(); This is possibly the easiest solution you can work with and will provide excellent results. I have spent some time reading the wiki entries and code changes in the Github repo which are very nicely documented. I don’t think any web developers should have a problem getting this plugin working.
Plugins vs Natural Code
Ultimately as the developer you will need to make decisions on what is worth adding into your website. There are some situations where you have a mobile responsive layout working 95% except for the videos/embedded content. In this scenario a plugin may be the easiest solution.
But there are so many alternatives to building a small CSS class system related solely to natural responsive resizing. For example this great article on Zurb referencing 4:3 and 16:9 embedded Vimeo content. Even if your mobile visitors will be limited with video interactions, you can still provide the best possible interface without glitches or dead page elements.
Image Credit: Assigning Things
I would suggest that any web developer interested in responsive media should check out the FitVids jQuery plugin. Even if you plan to use basic CSS solutions in your layouts it is still a great idea to have some familiarity with the JavaScript library. It requires a single line of code to implement, and sometimes this may turn out as the best solution. I have had only good experiences with FitVids in responsive layouts compared to other jQuery libraries such as videojs, which is not currently supporting mobile-responsive videos.
Video Streaming Limitations
Now there is a small drawback to embedded videos for mobile devices. Most providers such as DailyMotion, MetaCafe, and Trilulilu do not support mobile embeds. You will be trying to stream FLV video in browsers which have no Flash plugin.
And to make matters even more frustrating, there really isn’t a lot you can do otherwise. The best solution would be to host an alternate on a more universal service like YouTube which converts into MP4/OGG and other common mobile filetypes. Or alternatively you may try to store local copies of the videos on your own web server. The online webapp Savevid is excellent for grabbing a copy of your videos to convert.
But one of the major benefits to hosting on YouTube is the wide array of mobile applications. When you tap on a mobile video of YouTube the default behavior is often to open in the native YouTube application. Both Android and iOS devices come pre-installed with a mobile YouTube application, and it works very well for smartphone devices. Hopefully some of the other smartphone OS providers can pick up steam in the coming years where we can see full mobile video support.
Final Thoughts
I hope web developers may find these video & embed techniques useful for responsive layouts. Building a scalable solution which works properly on all monitors is not an easy task. It requires patience and a knack at scanning the Internet for solutions to a myriad of problems you’ll run into.
However HTML5 audio and video should not be a gigantic hurdle. Using some of these tips you should be able to get any familiar video embed player looking decent. But web trends are always changing and adapting to new scenes. If you know of other related solutions or just want to share some ideas, you can drop a comment in the discussion area below.
Source : blog[dot]templatemonster[dot]com
0 comments:
Post a Comment