Responsive local video helper

[tbullock]

Heyo,

So checking the theme helpers for embedding video I see it doesn't really have any helper mechanisms for local html5 video embeds. Generally that's not a problem since I can just do things like put the html directly into my markdown but I would like to take advantage of the same mechanisms that handles responsive video embeds for content stored on youtube or vimeo.

I'm not sure if i'm asking for an enhancement to the theme here or whether I can access the same mechanisms directly from my hand written html video tag, but I would like to make the video element responsive just like the youtube and vimeo embeds.

Feedback appreciated, thanks for the hard work on this theme btw.

[mmistakes]

There's no magic you need if you're using a standard HTML5 <video> element. You don't need any CSS either.

If you are using standard HTML5 video, that will make the video fit the width of the container. It’s important that you remove the height declaration when you do this so that the aspect ratio of the video is maintained as it grows and shrinks, lest you get awkward “bars” to fill the empty space (unlike images, the actual video maintains it’s aspect ratio regardless of the size of the element).

<video width="100%" ... ></video>

Or if you don't want to bother with adding width="100%" to each video element you can use the following CSS:

video {
  /* override other styles to make responsive */
  width: 100%    !important;
  height: auto   !important;
}

ref: https://css-tricks.com/fluid-width-video/

[tbullock]

Cheers for the feed back buddy. It's been a decade since I've html'd my brain, works great.