Bonaval Multimedia

Video Responsive de Youtube

MENU

  • Inicio
  • Empresa
    • Quen somos
    • Novas
    • KB: Blog IT
  • Solucións
    • As nosas solucións
    • Aplicacións a medida
    • Solucións web para a alimentación e o conxelado
    • Turismo: Portales, CRS, ERP
    • Comercio on line
    • Movilidade: webs e apps
    • Media: Vídeo Streamer, DVD
    • Sistemas XIS
    • SEO - Posicionamento en buscadores
    • Sistemas Expertos: Audiencias TV
    • Deseño e desenvolvemento en Joomla CMS
  • Servizos
    • Qué ofrecemos
    • Aloxamento Simple e Avanzado
    • Servidor Virtual
    • Atención ao cliente
  • Contacto

Video Responsive de Youtube

Para tener un video de youtube incrustado en nuestra página y que se adapte de forma "responsive" según el tamaño de pantalla debemos hacer lo siguiente:

Debemos meter el vídeo incrustado (iframe *) dentro de un contenedor (parrafo o div) al que le añadiremos una clase CSS que será la que haga la magia. Es necesario quitar el ancho y alto del iframe del video.

<div class="video-youtube-responsivo">  	<iframe src="https://youtu.be/XXXXXXXXXX" frameborder="0" allowfullscreen></iframe>  </div>

Luego debemos meter el código CSS de la clase del contenedor que hara que nuestro/s video/s sean responsivos

.video-youtube-responsivo {      position: relative;      overflow: hidden;      padding-top: 30px;      padding-bottom: 56.25%;      height: 0;  }  .video-youtube-responsivo iframe,  .video-youtube-responsivo object,  .video-youtube-responsivo embed {      position: absolute;      top: 0;      left: 0;      width: 100%;      height: 100%;  } 

Ver ejemplo:

 

 

 
  • Aviso legal
  • Novas
  • File Store
  • Kit Digital
  • Política de Privacidade
  • Política de cookies