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

By João Ferreira Jun 14, 2023 Intranet 0 Comments

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.

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
   
4. Add the following code, replacing the value in the videoCode variable by the video code of the YouTube video

   <script>
       const videoCode = "1-iS7LArMPA";
   
       waitForBackground('[data-automation-id="titleRegionBackgroundImage"]').then((elm) => {    
           elm.insertAdjacentHTML( 'beforeend', `<div class="video-container"><iframe src="https://www.youtube.com/embed/${videoCode}?autoplay=1&mute=1&controls=0" frameborder="0" ></iframe></div>`);
           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>
   
   <style>
       .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%;
       }
   </style>
   

   

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.

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.

• EarthCam Live: Times Square in 4K
• Train Trips in Sweden & Norway