CodeHQ

WordPress OEmbed – responsive video

Thursday, February 18th, 2016

Adds a container around iframes to allow responsive video when utilising WordPress OEmbed functionality.

jQuery

$("iframe").wrap("<div class='iframe-container'/>");

SCSS

.iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    iframe {
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

Original source

Tags: ACF, CSS, JS, OEmbed, Responsive video, WordPress
Posted in CSS, WordPress | No Comments »