How to make a video responsive

Hi, I found the following code at http://materializecss.com/media-css.html
This html5 code supposedly makes your videos responsive but not when I add it to my site with the relevant path. Does anyone know how to make videos (mp4) responsive on a Wordpress site?

<video class="responsive-video" controls>
    <source src="movie.mp4" type="video/mp4">
  </video>

Hi @Argent, I’m not sure what’s the problem in your particular wordpress case but here’s the theory for responsive video: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
As the article explains the core of the trick is to have a percentage padding-bottom that maps to the desired aspect ratio

padding-bottom: 56.25%; /* 16:9 */
3 Likes

Hi Andres,
I have my page working now. The problem was my lack of understanding of media queries and breakpoint relationships.
The code I posted initially always worked, but thanks for your insight and that great article.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.