Skip to content

Video gallery

Jump to bottom
Giorgio Bonvicini edited this page Oct 4, 2021 · 1 revision

This section is used to display one or more videos from external resources (e.g. YouTube, Vimeo...).

This section is based on the .portfolio class (see here).

Code

<!--Video gallery-->
<section class="page-section alternate-bg portfolio">
    <div class="heading-container text-center">
        <h2 class="section-heading text-uppercase">Video gallery</h2>
        <h3 class="section-subheading text-muted">A collection of cute animal videos.</h3>
    </div>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6 col-12">
                <div class="portfolio-item">
                    <div class="ratio ratio-16x9">
                        <iframe src="https://www.youtube.com/embed/tpiyEe_CqB4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </div>
                    <div class="portfolio-caption">
                        <div class="caption-subheading text-muted">
                            Cute and Funny Cat Videos to Keep You Smiling! 🐱
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-12">
                <div class="portfolio-item">
                    <div class="ratio ratio-16x9">
                        <iframe src="https://www.youtube.com/embed/uHKfrz65KSU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </div>
                    <div class="portfolio-caption">
                        <div class="caption-subheading text-muted">
                            Baby Cats - Cute and Funny Cat Videos Compilation #8 | Aww Animals
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-12">
                <div class="portfolio-item">
                    <div class="ratio ratio-16x9">
                        <iframe src="https://www.youtube.com/embed/ynp7O45r0s8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </div>
                    <div class="portfolio-caption">
                        <div class="caption-subheading text-muted">
                            Cute baby animals Videos Compilation cutest moment of the animals - Soo Cute! #12
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Output

Customization

This is the base element to include one video. Just add how many of these you want, one after the other.

<div class="col-md-6 col-12">
    <div class="portfolio-item">
        <div class="ratio ratio-16x9">
            <iframe src="https://www.youtube.com/embed/ynp7O45r0s8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="portfolio-caption">
            <div class="caption-subheading text-muted">
                Caption to the video
            </div>
        </div>
    </div>
</div>

<div class="ratio ratio-16x9"> this class is used to fix the aspect ratio of the video. If you are embedding video witg 4:3 or other aspect ratios change this. Read more

<iframe src="https://www.youtube.com/embed/ynp7O45r0s8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> this is the code that is actually including the video in the page and has be provided by the external webiste you are including the video from. For example for YouTube open your video, click "share" and "embed", then copy the code that is provided there.
Note: remove any reference to fixed height or width.

You can add a caption to the video as well.

The videos can be played in the webpage, opened in the external website or brought to full screen.

Clone this wiki locally