Headers

Full Width Video Header


This is a header that can be added onto any page on any WordPress theme. This header loads a video without sound and plays it on a loop. This header provides an image and a message prompting the user to update their browser in case the video can’t load. Also there is space to enter content on top of the video as seen with the title above.


Requirements

  • Toolset (Content Templates)

Directions

To add this code you will need to add the CSS and JavaScript to a Toolset Content Template (or any other way that will add the styles and scripts below to the website or page where this header is used). Then add the HTML at the beginning of the main content of the page. If the video does not span the whole width of the page adjust the CSS (padding and/or margin) of the container(s) to which you have added the HTML and make sure that they span the whole width.

Code

HTML


<div class="header-unit" style="height: 220px;">
    <div id="video-container">
        <video id="heel-fullvid" style="background: url(/wp-content/uploads/sites/4/2023/12/sky-414199-scaled.jpg) no-repeat;" autoplay="" loop="" muted="" class="fillWidth">
            <source src="https://oasis.unc.edu/wp-content/uploads/sites/4/2023/12/cloud_-_48503-Original.mp4">Your browser does not support the video tag. I suggest you upgrade your browser.
        </video>
    </div>

    <div class="wdn-promo-container" style="text-align: center;">
        <div class="wdn-promo-content" style="bottom: 40%;">
            <div>
                <h1>Full Width Video Header</h1>
            </div>
        </div>
    </div>

    <!-- Added Button -->
    <button id="vid-controls" onclick="switchControls()">Pause Video <i class="bi bi-pause-circle-fill"></i></button>
</div>

CSS


/* Full Width Video Header CSS */
.header-unit {
    position: relative;
    overflow: hidden;
}

#video-container {
    top: 0%;
    position: absolute;
    left: 0%;
    height: 100%;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    min-width: 1200px;
}

video {
    position: absolute;
    z-index: 0;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: auto;
}

@media (min-width: 768px) {
    video {
        display: block;
        vertical-align: top;
    }
}

video.fillWidth {
    width: 100%;
    background-size: cover;
}

#video-container #heel-fullvid {
    background-size: cover !important;
}

.wdn-promo-container {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

.wdn-promo-container .wdn-promo-content {
    position: absolute;
    width: 100%;
    text-shadow: 0 2px 2px rgba(0,0,0,0.6);
}

#vid-controls {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 16px;
    padding: 10px;
    margin: 10px;
    border: 0;
    background: rgba(0,0,0,.5);
    color: #fff;
    cursor: pointer;
}

#vid-controls:hover, #vid-controls:focus {
    background: #000;
    text-decoration: underline;
}

JavaScript


/*Full Width Video Header JavaScript*/
function switchControls() {
    var video = document.getElementById("heel-fullvid");
    var button = document.getElementById("vid-controls");

    if (video.paused) {
        video.play();
        button.innerHTML = 'Pause Video <i class="bi bi-pause-circle-fill"></i>';
    } else {
        video.pause();
        button.innerHTML = 'Play Video';
    }
}