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!
We’re having some issues with the responsive of Learnpress.
Anyone know if this solve that problem?
Thanks
Thank you, did the job perfectly. Just added the CSS to the theme custom code and worked a treat!
This was just what I needed to solve an issue I am having with a new website in development. Thanks
Thank you very much!! This is exactly what i was looking foor. Works perfectly
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.
//
This is very helpful for me.
This is really nice. It’s helpful for me.
This is extremely helpful! Thank you. I just copy-pasted the CSS and it works flawlessly 🙂
GJ, thanks a lot, it solved my problem with a video in a pop up
thanks a lot! Solved my problem.
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”.
Google actually lets you look that up too: http://bfy.tw/3tQu
😉
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.
Nico, try this tutorial: http://bfy.tw/3srt
thanks dude you are amazing. i spent my one hour then i found you and i solved this problem.
I found a source that uses just CSS:
https://css-tricks.com/rundown-of-handling-flexible-media/
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-topto 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!.wp-video {
width: 100% !important;
}
.mejs-container {
width: 100% !important;
height: auto !important;
padding-top: 56.25%;
}
.mejs-overlay, .mejs-poster {
width: 100% !important;
height: 100% !important;
}
.mejs-mediaelement video {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
width: 100% !important;
height: 100% !important;
}
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
I solved that problem thanks!
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
Hello Zoe. How did You fix it?
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,
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!
Thanks Val, updated that Gist! Also thinking of posting a demo shortly. Stay tuned.
This is great! Does the shortcode also make videos responsive in non-responsive themes? (or is that a silly question from a non-developer?)
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 wanttargetWidthto be an actual container. Alternatively, check out FitVids.js.