Adding a dynamic touch: Using a live YouTube video as a SharePoint page background header

Captivating your Intranet visitors with visually captivating content is crucial for creating user engagement. You can surprise your users and keep them engaged with the use of YouTube live videos shown as page background headers, providing a dynamic and ever-changing visual element that surprises and delights your readers.

In this blog post, I-m showing the process of incorporating live YouTube videos into your SharePoint site, transforming the top of your pages into captivating visual experiences that leave a lasting impression.

SharePoint page header and YouTube live videos

ℹ️ 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 YouTube video as a background to a SharePoint page header

  1. Edit the page where you want to add the video
  2. Add the modern script editor to the top of the page and make sure you remove the padding in the web part settings
  3. Get the YouTube video code from the video URL
    SharePoint page header and YouTube live videos
  4. Add the following code, replacing the value in the videoCode variable by the video code of the YouTube video
        const videoCode = "1-iS7LArMPA";
        waitForBackground('[data-automation-id="titleRegionBackgroundImage"]').then((elm) => {    
            elm.insertAdjacentHTML( 'beforeend', `<div class="video-container"><iframe src="${videoCode}?autoplay=1&mute=1&controls=0" frameborder="0" ></iframe></div>`);
            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
        .video-container {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 */
            height: 0;
        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

    SharePoint page header and YouTube live videos

  5. 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 at the top.

SharePoint page header and YouTube live videos

If you are eager to implement something like this, I have included two YouTube videos below that play continuously, serving as excellent options for testing the solution.

No comments yet

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: