It is a common knowledge that videos are vital part of the online presence of any business. Visitors do love to be entertained visually and adding videos to company and product websites makes things a bit more understandable. Videos are usually uploaded to social video websites and embedded into web pages.
If you are not using Bootstrap or Foundation framework for creating websites, you know how difficult can be to tackle the problem with making iframes responsive and making them look good on small and medium devices.
MediaWrapper.js is a great solution for anyone who is looking for a way to add iframe videos responsively on their websites. It is a plugin that will help you out to wrap up videos so they behave better on handheld devices.
Using the plugin is quite simple. To implement it, link the mediaWrapper.js at the end of your document as well as the latest jQuery library. Then add the required script:
<script>
$(document).ready(function(){
$('iframe.wrap').mediaWrapper();
$('iframe.wrapAspect').mediaWrapper({
intrinsic: false,
baseWidth :16,
baseHeight :9
});
});
</script>
Add the following class=”wrap” to you iframe or class=”wrapAspect” to set you own aspect ratio. You should be ready to go. Resize your browser to check how your videos behave.
Check out the demo to see how mediaWrapper.js works.