Both Bootstrap and Foundation are packaged with responsive video wrappers.
Both work in a similar way. An iframe or video are positioned absolutely inside a relative <div> tag.
The div takes it’s aspect ratio from its bottom padding.
The technique is well established, works well across devices and is dead easy to implement.
How Wordpress [video] shortcode works
By default if you insert media inside the Wordpress WYSIWG editor it will create a shortcode like this
This creates the following HTML output within the post.
This is a bit of a mess.
Not only is the output unresponsive; but because the width is defined on the containing div it will often exceed the width of the page
What is preferable is that we create a responsive container that will fit any aspect ratio video on the fly.
To do this we simply need to override the
wp_video_shortcode filter; remove the existing div; and wrap the video in a responsive div with the padding defined from the aspect ratio of the video.
I use the following code. This can be inserted directly into a themes
This will now have Wordpress return a responsive element.
This will autoplay and loop. It has hidden controls and is muted which allows it to autoplay on mobile devices and Chrome.
This assumes you will treat your video’s like a GIFs. If you do not and want to keep controls comment out the
str_replace replace lines.
Responsive Video Class
I am using the
flex-video class (which Foundation uses for responsive media elements).
If you using bootstrap replace it with
If you do not wish to use either framework simply add the following CSS to your design.