Categoria: CSS

Como deixar o vídeo responsivo?

Publicado em por Éder Garcia On-line

Utilizando HTML5 e CSS 

<!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 id="video" width="400" controls>
	   <source src="seu_arquivo.mp4" type="video/mp4">
	   <source src="seu_arquivo.ogg" type="video/ogg">
	   Seu navegador não suporta vídeo em HTML5.
	</video>
		
        <p>Redimensione a janela do navegador para ver como o tamanho do player de vídeo será dimensionado.</p>
	
    </body>
</html>

Referência:
https://www.w3schools.com/css/css_rwd_videos.asp