How to Make the WordPress Video Shortcode Responsive (and Full Width)

- 23 comments

Development,Projects,Snippets,WordPress

I needed a quick way to make my WordPress video shortcode responsive and full width. Here’s how I did it:

Here’s an example shortcode:

That shortcode will generate this markup:

Here’s the CSS I used to ensure the video takes up the full width of its container:

Here’s the (optional) Javascript I used to compliment the CSS and give the video container proportional height while maintaining the video’s original aspect ratio:

Enjoy your responsive WordPress videos!


Comments

  1. Awesome, awesome, awesome! Thank you so much for sharing this! The CSS worked flawlessly.

    The JS didn’t do what I needed it to do. Here’s my JS in case it helps someone else.

    //

  2. Michael, very funny, I get it. However that’s what I did, put it in a script file and added it to the header; I put it in after the jQuery call that happens in wp_head().

    It will say that “$ is not a function”.

  3. I can’t get the script to work… first off, can you explain to a newbie how to include the jQuery script? I tried adding it to my header but it was not recognized. I’ve tested the rest so far and the video actually disappears, I’ve tried the alternative suggested by Allen and it works, except it breaks fullscreen, since for some reason it makes fullscreen higher than the viewport.

    1. That may work fine for your case, which seems for some reason unable to populate the video width and height. Using Javascript to get those values will allow the padding-top to be set dynamically and more accurately calculate the video’s original aspect ratio. That was an important piece of my puzzle, but thanks for offering an alternative!

  4. The height: auto important; makes the video not display. I get the play button but that’s it. I don’t even get the control/tool bar when hovering. If I hit the play button the video starts but I don’t see it.

    If I remove the height: auto !important then the video shows and it is responsive, sort of. The backgound remains the same height as the video shrinks, causing a huge empty space on smaller screen sizes.

    I can achieve this result with just a few lines of CSS and no Javascript, but that’s not what I’m looking for. I need the entire area to be responsive, not just the video itself.

    Allen

  5. Hi -thx for the post. Could you please tell me how to increase the size of my video to full width? Using the width parameter in the video shortcode doesnt seem to work. Thx

  6. Exactly what I was looking for. Tanks for sharing.

    But although I seem to load JS as jquery properly, it result in a video with no height, only progress bar is visible. While loading the video is seen correct for half second.

    Any hints? Thanks,

  7. Great, i was trying to find a way to do exactly that! No need anymore! Saved me a bunch of time!
    in the jquery script, theres a bracket missing at the end of the css method call.

    css('height', Math.ceil(vidHeight * (targetWidth / vidWidth)) );

    Thanks so much!

    1. Hi Marcus, not silly at all! Yes, it will be responsive because $(this).width() will use the window width instead of a specific DOM element’s width. But if your theme isn’t responsive that may yield some strange results. You might want targetWidth to be an actual container. Alternatively, check out FitVids.js.

Leave a Comment