1

I found some code that will help video embeds be responsive: http://alxmedia.se/code/2013/10/make-wordpress-default-video-embeds-responsive/

The problem is not the code, the code is working great! You can see a live example at: http://joshrodg.com/hall/ - this is very much in development, just scroll down and check out the videos :-)

What I'd like to do is set a max-width. When I set a max-width on the current div, the video gets chopped off and there are black bars on the top and bottom. I'd love it if there was a way to set a max-width while preserving the aspect ratio. The videos are just too huge to leave it at 100% wide...I was think more like 600px, but still scaling on smaller screens so that everything remains responsive.

The current code I am using has been slightly adjusted from the original source, so I'll go ahead and post it here...

The function:

function video_embed( $html ) {
    return '<div class="video-wrap">' . $html . '</div>';
}
add_filter( 'embed_oembed_html', 'video_embed', 10, 3 );

The CSS:

.video-wrap {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
}

.video-wrap iframe,
.video-wrap object,
.video-wrap embed,
.video-wrap video {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

Generated Output:

<div class="video-wrap">
    <iframe width="500" height="281" src="https://www.youtube.com/embed/hevFL7CiUx4?feature=oembed" frameborder="0" allowfullscreen=""></iframe>
</div>
  • great that you figured it out, but is is just a HTML/CSS question and off-topic – Mark Kaplun Sep 16 '16 at 6:02
  • Kind of, I would have to adjust the code for it to work outside of WordPress since the code goes in the functions file and as-is right now wouldn't work anywhere else. It did come down to a basic html/css answer, but it's totally related to WordPress. – Josh Rodgers Sep 18 '16 at 0:47
1

So, apparently, I needed to read a little bit more before I posted my question.

After I posted the question, I ran across: https://moodle.org/mod/forum/discuss.php?d=258650, which is what I incorporated into the code I was using.

I modified my function to look like:

function video_embed( $html ) {
    return '<div class="video-container"><div class="video-wrap">' . $html . '</div></div>';
}
add_filter( 'embed_oembed_html', 'video_embed', 10, 3 );

I added the following css:

.video-container {
    max-width: 400px;
}

So, what I did was add a video-container div that wrapped around my video-wrap div, where I specified a max-width.

I tried all different widths, all of which are now working :-)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.