Responsive Videos Script

For responsive sites. If clients add their own videos via iframe, this script will find those iframes, wrap them in a responsive container, and apply responsive styles to the video so it scales perfectly without letterboxing.

by Ryan Brackett

HTML

<body id="xint">For responsive sites. If clients add their own videos via iframe, this script will find those iframes, wrap them in a responsive container, and apply responsive styles to the video so it scales perfectly without letterboxing.
    <br/>
    <br/> <small><a href="mailto:[email protected]">[email protected]</a></small>
    <br/>
    <br/>
    <iframe src="http://player.vimeo.com/video/70563876?title=0&amp;byline=0&amp;portrait=0&amp;color=307aba"></iframe>
</body>

CSS

body {
    font-family: arial;
    font-size: 12px;
}
.responsive-vid {
    width: 100%;
    font-size: 12px;
    height: 0px;
    padding-bottom: 56.2%;
    position: relative;
}
.responsive-vid iframe {
    width: 100%!important;
    height: 100%!important;
    position: absolute;
    border: 0px;
}

JavaScript

$("#xint iframe").wrap("<div class='responsive-vid'></div>");