-->

Cómo insertar vídeo YouTube responsive

Insertar vídeo YouTube responsive

En el artículo de hoy vamos a explicar cómo insertar un vídeo de YouTube responsive a través de un ejemplo gráfico.

Pero antes de mostrar cómo se inserta un vídeo de YouTube de manera responsive os contaré que un diseño responsive redimensiona y coloca los elementos de una página web de forma que se adapten al ancho de cada dispositivo permitiendo una correcta visualización y una mejor experiencia de usuario.

PASOS PARA INSERTAR UN VÍDEO DE YOUTUBE DE MANERA RESPONSIVE

  1. Paso 1. En primer lugar deberemos seleccionar el vídeo de YouTube que queremos compartir.
    Insertar vídeo de YouTube de manera responsive

  2. Paso 2. A continuación haremos clic sobre el botón compartir y seleccionamos la opción insertar.
    Insertar vídeo de YouTube de manera responsive


  3. Paso 3. Copiamos el código del vídeo, en nuestro caso hemos copiado el siguiente:
    <iframe width="560" height="315" src="https://www.youtube.com/embed/8zLUdceTMrI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

  4. Paso 4. Una vez hemos copiado el código debemos limpiarlo de los atributos que no necesitaremos (width, height, etc), el código resultante es el siguiente:
    <iframe src="https://www.youtube.com/embed/8zLUdceTMrI" frameborder="0" allowfullscreen></iframe>

  5. Paso 5. El siguiente paso es poner el iframe del vídeo en un contenedor responsive que llamaremos video-responsive
    <div class="video-responsive">
    <iframe src="https://www.youtube.com/embed/8zLUdceTMrI" frameborder="0" allowfullscreen></iframe>
    </div>

  6. Paso 6. En último lugar deberemos añadir a nuestro CSS las características del nuevo div que hemos creado:
    /* PERSONALIZACIÓN VIDEO-RESPONSIVE
    ------------------------------------------------- */
    .video-responsive {
    position: relative;
    padding-top: 30px;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    }

    .video-responsive iframe,
    .video-responsive object,
    .video-responsive embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }


Si te ha gustado el artículo sobre cómo insertar un vídeo de YouTube responsive puedes colaborar con este Blog visitando a nuestros patrocinadores, con esto me ayudarás a mantener el Blog y pueda escribir más artículos.


ARTÍCULOS QUE TE PUEDEN INTERESAR