How to use video as a background in SharePoint pages header

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.

SharePoint pages video background

ℹ️ Important
To implement the customization described in this article you will need to use the modern PnP Script Editor web part. If you don’t have it yet installedhave a look to the article I wrote about it here.

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
    SharePoint pages video background
  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
    SharePoint pages video background
  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
    SharePoint pages video background
  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
  9. <script>
        const videoURL = "";
        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) => {
       = '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)) {
                observer.observe(document.body, {
                    childList: true,
                    subtree: true

    SharePoint pages video background

  10. 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.

SharePoint pages video background

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

2 Responses to “How to use video as a background in SharePoint pages header”

  1. S.C. Graanoogst

    October 11, 2023

    Kind João,

    First, I really like this feature. I am said to say though that the functionality doesn’t work for me as in the video.
    What could prevent these steps from having the desired result, namely the video playing on loop on the page on the spot of the banner?

    Kind regards,

    • João Ferreira

      November 16, 2023

      Hi Sarajan,

      Its hard to know what could prevent it form working without seeing the environment.
      Do you have any error in the browser console after defining the video as a background?


Leave a Reply

I've been working with Microsoft Technologies over the last ten years, mainly focused on creating collaboration and productivity solutions that drive the adoption of Microsoft Modern Workplace.

%d bloggers like this: