Video

La clase "video" de Quickly te permite insertar videos que se adaptan automáticamente a cualquier tamaño de pantalla. Con esta clase, tus videos mantendrán su proporción y calidad en todos los dispositivos. Simplifica la integración multimedia y asegura una reproducción fluida y responsiva en tu sitio web.

.video-h / Formato Horizontal

Clase Descripción
.video ó .video-h La clase video-horizontal debe aplicarse al contenedor de videos con formato 16:9, de manera similar a cómo se usa la clase "img-fit" para imágenes. Esto garantiza que el video mantenga su relación de aspecto y se ajuste correctamente al ancho del contenedor, preservando su apariencia en diferentes tamaños de pantalla.

Horizontal Formato 16/9

Etiqueta Iframe
Etiqueta Video
HTML 
                                    
    <!-- Etiqueta Iframe -->                                                                                                 
    <div class="video-h rounded border">
        <iframe src="https://www.youtube.com/embed/98Tcz6PESaE?si=pbkyGvn_nEUO2BgD" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>                                
    </div>
    
    <!-- Etiqueta Video -->
    <div class="video rounded border">
        <video controls>
            <source src="./video/Quickly.mp4" type="video/mp4">
            Su navegador no soporta la etiqueta de video.
        </video>
    </div>

.video-v / Formato Vertical

Clase Descripción
.video-v La clase .video-vertical debe aplicarse al contenedor de videos en formato 9:16, de manera similar a cómo se utiliza la clase img-fit para imágenes. Esto asegura que el video mantenga su relación de aspecto vertical y se ajuste correctamente al ancho del contenedor, conservando su apariencia en diferentes tamaños de pantalla.

Vertical Formato 9/16

Etiqueta Iframe
Etiqueta Video
HTML 
    
    <!-- Etiqueta Iframe -->                                                                    
    <div class="video-v rounded border">
        <iframe src="https://www.youtube.com/embed/klvIA7d0Y6Q" title="Quickly CSS Grid" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>                                
    </div>

    <!-- Etiqueta Video -->
    <div class="video-v rounded border">
        <video controls>
            <source src="./video/Quickly.mp4" type="video/mp4">
            Su navegador no soporta la etiqueta de video.
        </video>
    </div>