En moitas ocasión non é previsible controlar o tamaño que debe de ter un vídeo á hora de engadilo ao Drupal. Isto ocorre nalguhas resolucións xa que as dimensións do vídeo superan o ancho dispoñible, ou no caso de que haxa cambios estrutura dos bloques, pasando de unha columna a dúas.
Para darlle remedio a este problema, debemos de empregar os estilos CSS.
A. UN VÍDEO DE YOUTUBE
1. Escollemos o vídeo de youtube desexado. Clic en compartir e posteriormente en inserir. Obtemos un código html como o seguinte:
<iframe width="560" height="315" src="https://www.youtube.com/embed/9aksj92T41Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Se nos fixamos, como width é de 560px e o height é de 315, a relación ancho con respecto ao alto é 16:9. Se dividimos 9/16=0.5625, que ven a ser o 56.25%, que é a relación que engadimos ao padding-bottom. Se a relación entre ancho e alto fose 4:3, como padding-top sería do 75% (3/4=0.75, é dicir o 75%)
2. Deste código eliminamos as dimensións de ancho de alto (width e height), quedado así:
<iframe src="https://www.youtube.com/embed/9aksj92T41Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
3. Inserirmos este código dentro do body do seguinte código html, quedando así:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.video-responsive{
position:relative;
overflow:hidden;
padding-bottom:56.25%;
}
.video-responsive iframe{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<div class="video-responsive">
<iframe src="https://www.youtube.com/embed/9aksj92T41Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</body>
</html>
B. UN VÍDEO SUBIDO AO DRUPAL COMO DOCUMENTO ADXUNTO
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<style>
.video-responsive {
position: relative;
margin:0 auto;
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
.video-responsive video {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left:0;
}
</style>
</head>
<body>
<div class="video-responsive">
<video controls="controls">
<source src="http://www.edu.xunta.gal/centros/crasantacomba/system/files/CESTA%20VIAXEIRA%20DE%20OVOS.mp4" type="video/mp4" />
O teu navegador non soporta este vídeo.
</video>
</div>
</body>
</html>
