[Plugin: VideoJS – HTML5 Video Player for WordPress] Make videos responsive.

I don’t have time to test this right now, and I’m not super familiar with how FitVids works, but you could try adding class=”resvids” to the shortcode directly: [video mp4="https://video.mp4" class="resvids"]

You may also be able to just use basic CSS similar to this in your themes stylesheet to achieve the same thing without javascript:

video,.video-js, img.vjs-poster {
	max-width: 100%;
	height: auto !important;
}

The css seems to work,
but the video seems to not exist in the content area, making the browser thing there is no content, and the content area height is very small, makes the comment box go on top of the video, as well as pushes the video controls up..

i apply a heigh:600px to #content to fix it but this seems not the right way to go.. any fix for this ?

Thank you!

Does this work any better?

.video-container {
	position: relative;
	padding-bottom: 74.25%; /* 4/3 ratio */
	padding-top: 30px; /* IE6 workaround*/
	height: 0;
	overflow: hidden;
}

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

.video-js, img.vjs-poster {
	width: 100% !important;
	height: 100% !important; //these need !important because IE wants to set height/width to 100px
	max-width: 100%;
}

Your shortcode would have to be in a div with the class ‘video-container’. No guarantees it will work as I just copy and pasted from a recent site of my own, but it should be a good starting point hopefully.

hm. i tried it but theres a huge white thing covering the majority of the page now so i couldnt tell

been having the same issue here.

tried this fix but it didn’t work 100% (it’s for video.js if you were using it outside of this wordpress plugin version).

https://www.hexagonwebworks.com/2012/responsive-videos-updated/

noticed in the styles posted above, they reference .videoWrapper, but this class is not evident in the structure of the code that the wp plugin spits out.

guessing the .videoWrapper element is just the div that wraps around the player, but in firebug it’s showing me the “wrapper” as

<div style="width: 300px; height: 150px;" height="150" width="300" class="video-js vjs-default-skin vjs-playing" id="1">

i tried adding <div class=”videoWrapper”> around my shortcode (as they mention in the link I posted above – duh), and it works!

make sure you play with padding-bottom on .videoWrapper in the css if you get black bars on the top or sides.