Use CSS width property for a responsive video player

To make your video player responsive, use the width property and set it to 100%

Example

Live Demo

<!DOCTYPE html> <html>    <head>       <meta name = "viewport" content="width=device-width, initial-scale=1.0">          <style>             video {                width: 100%;                height: auto;             }          </style>    </head>    <body>       <video width = "300" controls autoplay>          <source src = "/html5/foo.ogg" type = "video/ogg" />          <source src = "/html5/foo.mp4" type = "video/mp4" />       </video>       <p>To check the effect, you need to resize the browser.</p>    </body> </html>
Updated on: 2020-06-25T06:12:23+05:30

221 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements