Bonaval Multimedia

Video Responsive de Youtube

MENU

  • Home
  • Company
    • About us
    • News
    • KB: Blog IT
  • Solutions
    • Our solutions
    • Tourism: Portals, CRS, ERP
    • Expert Systems: TV Audience
    • GIS systems
    • Media: DVD and NetTV
    • Mobility: webs & apps
    • Online stores
    • Customized applications
    • Design and development with Joomla CMS
    • SEO - Positioning in seekers
    • Web solutions for food and frozen
  • Services
    • What we offer
    • Simple and Advanced Hosting
    • Virtual Dedicated Server
    • Timetable
  • Contact

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
  • News
  • File Store
  • Kit Digital
  • Privacy policy
  • Cookies policy