How to use video as a background in SharePoint pages header

By João Ferreira Mar 15, 2023 Branding, Intranet 2 Comments

Using video backgrounds instead of images can be beneficial for several reasons. Video backgrounds can create a more immersive and interactive experience for the user, can provide a context to the content on the page or increase brand awareness by making a lasting impression on the viewer.

Overall, video backgrounds can be a powerful tool for enhancing user experience, however, with SharePoint pages you can not use videos as backgrounds in the title area… Unless you customize the page as I’m explaining in this article.

Apply a video as a background to a SharePoint page header

1. Start by uploading the videos you would like to use to a SharePoint document library
   💎 Pro Tip
   To prevent getting an impact in the page performance make sure you use light and short videos, this solution will play them in loop. I recommend videos in the mp4 format, with 10 seconds or less and less than 10 MB.
2. Once the videos are uploaded, mouse hover the one you want to use and click in the See details
   

   

3. In the side panel click on More details
4. Next to the Path click in the copy icon to get the link to the video in the clipboard
   

   

5. Edit the page where you want to add the video
6. Take a full-screen screenshot of the video you want to add as a background and define it as the header background-image for the page. This will make the transition from the image to the video smother and in case of any issue with the video, users will see the image as a fallback
   
7. Add the modern script editor to the top of the page and make sure you remove the padding in the web part settings
8. Add the following code, replacing the value in the videoURL variable by the URL of the video you have in the clipboard

<script>
    const videoURL = "https://handsonsp.sharepoint.com/sites/Intranet/Shared%20Documents/Videos/Mountains.mp4";

    waitForBackground('[data-automation-id="titleRegionBackgroundImage"]').then((elm) => {    
        elm.insertAdjacentHTML( 'beforeend', `<video loop muted autoplay src="${videoURL}" style="height: 100%; margin: 0px; object-fit: cover; padding: 0px; position: absolute; width: 100%; object-position: center center;"></video>`);
        waitForBackground('[data-automation-id="titleRegionBackgroundImage"] img').then((img) => {
            img.style.display = 'none';
        });
    });

    function waitForBackground(selector) {
        return new Promise(resolve => {
            if (document.querySelector(selector)) {
                return resolve(document.querySelector(selector));
            }

            const observer = new MutationObserver(mutations => {
                if (document.querySelector(selector)) {
                    resolve(document.querySelector(selector));
                    observer.disconnect();
                }
            });

            observer.observe(document.body, {
                childList: true,
                subtree: true
            });
        });
    }
</script>



9. Publish the page and refresh it to see the video playing

In the following animation you can see how the page looks like with the video playing in loop at the top.

In the following video you can see a full demo of the process, and also get bonus content that will allow you to create page templates with videos already in place