Video in Quickly

The "video" class of Quickly It allows you to insert videos that automatically adapt to any screen size.With this class, your videos will maintain their proportion and quality on all devices.Simplifies multimedia integration and ensures fluid and responsive reproduction on your website.

.video-h / Horizontal format

Class Description
.video or .video-h The .video-horizontal class should be applied to the video container with 16:9 format, similar to how the "IMG-FIT" class is used for images. This guarantees that the video maintains its appearance ratio and correctly adjusts to the width of the container, preserving its appearance in different screen sizes.

Horizontal format 16/9

Iframe Tag
Video Tag
HTML 
                                    
    <!-- Iframe Tag -->                                                                                                 
    <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>
    
    <!-- Video Tag -->
    <div class="video rounded border">
        <video controls>
            <source src="./video/Quickly.mp4" type="video/mp4">
            Your browser does not support the video label.
        </video>
    </div>

.video-v / Vertical format

Class Description
.video-v The .video-vertical class should be applied to the video container in format 9:16, similar to how the IMG-Fit class for images is used. This ensures that the video maintains its vertical appearance ratio and correctly adjusts to the width of the container, retaining its appearance in different screen sizes.

Vertical format 9/16

Iframe Tag
Video Tag
HTML 
    
    <!-- Iframe Tag -->                                                                    
    <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>

    <!-- Video tag -->
    <div class="video-v rounded border">
        <video controls>
            <source src="./video/Quickly.mp4" type="video/mp4">
            Your browser does not support the video label.
        </video>
    </div>