Page History

Lazy Load YT Video
* Requires adding 2 HTML code blocksto the page, one for CSS styles and one for JavaScript
* To generate the video code to add to the modal WYSIWYG, you will need to add a lazy load YT block
 to a test page with the YT video, video name, cover image (if needed), and any other features. Then 
 view that page's source (or inspect it) and copy the block's code to then paste in the modal body. You 
 may have to modify the code slightly (you'll notice in example code below that line breaks were removed; 
 this is because the WYSIWYG field adds <p> tags when you add line breaks.)

CSS (place this above card modal block, in an HTML block)

<style>
 /***********
  CSS for Video in Card Modal
  ************/
  .wp-block-embed__wrapper {
    position: relative;
  }
  
  .title-text-youtube-background {
    z-index: 21;
    position: absolute;
    background-image: linear-gradient(rgb(40,39,40),rgba(40,39,40,0.8),rgba(40,39,40,0.6),rgba(40,39,40,0.3),rgba(40,39,40,0.1), transparent);
    top: 0;
    width: 100%;
    height: 20%;
  }
      
  .title-text-youtube {
    z-index: 22;
    position: absolute;
    top: 7%;
    left: 7%;
    width: 98%;
    color: #fff;
    text-shadow: 0.5px 0.5px #646569;
    transform: translate(-5%,-5%);
  }

  figure {
    cursor: pointer;
  }


  @media only screen and (min-width: 992px) {
    .title-text-youtube {
      font-size: 1.125rem;
    }
  }
    
  @media only screen and (max-width: 767px) {
    .mobile-img-display-none {
      display: none;
    }
    .title-text-youtube {
      font-size: .8333rem;
      line-height: 1;
      top: 10%;
    }

    .title-text-youtube-background {
      height: 30%;
    } 
  }

//adds visible tabbing to the play button instead of the <a> surrounding it.
#videoButton {
  display: block;

  &:focus {
    outline: none; 
  }
  
  &:focus-visible .brand-play-button {
    border: 2px solid #272827;
    border-radius: 1.25rem;
  }
}
  // play buttons
  .brand-play-button {
      z-index: 21;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 30%;
      max-width: 170px;
      transform: translate(-50%, -50%);
      -webkit-transition: -webkit-filter 0.3s ease;
      transition: -webkit-filter 0.3s ease;
      -o-transition: filter 0.3s ease;
      transition: filter 0.3s ease;
      transition: filter 0.3s ease, -webkit-filter 0.3s ease;
      cursor: pointer;

      &:hover { 
        -webkit-filter: brightness(.8);
        filter: brightness(.8);
      }
  }
    
  .lightButton {
    .st0 {
      fill: #fff;
    }
    .st1 {
      fill: #f2f2f2;
    }
    .st2 {
      opacity: 0.3;
      fill: #adadad;
    }
    .st3 {
      fill:none;
      stroke: #fff;
      stroke-width: 11.6965;
      stroke-miterlimit: 10;
    }

    .brand-play-button:hover {
      -webkit-filter: brightness(.85);
      filter: brightness(.85);
    }
  }
</style>




EXAMPLE CODE FOR MODAL (create your lazy load block, copy the html and place it inside card modal WYSIWYG field)

<div class="youtube-lazy-load">
					<figure id="figurejibiBTbpDrQ" class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9">
						<div class="wp-block-embed__wrapper">       
							<div tabindex = "0" id="videojibiBTbpDrQ" class="youtube" data-embed="jibiBTbpDrQ" aria-label="Play video - Bob Batt | Improving Health Care Operations and Outcomes | Wisconsin School of Business">
								<div class="title-text-youtube-background"><p class="title-text-youtube" id="titlejibiBTbpDrQ">Bob Batt | Improving Health Care Operations and Outcomes | Wisconsin School of Business</p></div><svg class="brand-play-button lightButton" alt="play button icon" aria-labelledby="titlejibiBTbpDrQ" version="1.1" id="videoButton" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" xml:space="preserve"><g><circle class="st2" cx="249.9655" cy="249.2184" r="237.931"></circle><g><polygon class="st0" points="190.4828,136.6834 190.4828,249.2184 358.1911,249.2184 "></polygon><polygon class="st1" points="190.4828,361.7533 190.4828,249.2184 358.1911,249.2184 "></polygon></g><circle class="st3" cx="249.9655" cy="249.2184" r="237.931"></circle></g></svg></div></div></figure></div>





JAVASCRIPT (place this below card modal block, in an HTML block)
<script>
 // JS for Video in Card Modal
    let modalWithVideo = document.getElementById("Modal-2-block_7faf3c3dfcd424a179de872fc2b1f9fe");

		// loads youtube api
		var tag = document.createElement('script');
		tag.src = "https://www.youtube.com/iframe_api";
		var firstScriptTag = document.getElementsByTagName('script')[0];
		firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
		let lazyPlayerjibiBTbpDrQ = null;

		var youtube = document.getElementById("videojibiBTbpDrQ")

		//replaces placeholder div with YouTube thumbnail or image override
		var source ="https://business.wisc.edu/wp-content/uploads/2024/08/Bob_T2L3-Thumbnails_Directory.jpg"
		var image = new Image();
		image.src = source;
		image.alt = "Youtube Thumbnail for Bob Batt | Improving Health Care Operations and Outcomes | Wisconsin School of Business"; //Tells screenreaders that the image is labelled by the title of video
		youtube.appendChild( image );            

		youtube.addEventListener( "click", replacevideo  ); 
		youtube.addEventListener( "keyup", replacevideo  ); 
		function replacevideo(e) {
			if (e.type == "click" || e.key === 'Enter' || e.key === ' ') {
				// Added to remove extra space above video
				var element = document.getElementById("figurejibiBTbpDrQ");
				element.classList.add("wp-has-aspect-ratio");

				//creates iframe
				var iframe = document.createElement( "iframe" );                       
				iframe.setAttribute( "frameborder", "0" );                        
				iframe.setAttribute( "allowfullscreen", "" );                        
				iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );
				var dataEmbed= this.dataset.embed;                        
				this.innerHTML = "";                        
				this.appendChild( iframe );


				var videoId=this.id;           
				var player = new YT.Player(videoId, {               
					height: '390',                
					width: '640',                
					videoId: dataEmbed,                
					playerVars: {                    
						'playsinline': 1,
						'rel': 0  // related videos are from same YT channel                
					},                
					events: {                  
						'onReady': onLazyPlayerReady,                
					}            
				});          
			
			}   
		}

		function onLazyPlayerReady(event) {
		//plays video upon load
			lazyPlayerjibiBTbpDrQ = event.target; 
			lazyPlayerjibiBTbpDrQ.playVideo();
		}

modalWithVideo.addEventListener('hidden.bs.modal', function (event) {
      lazyPlayerjibiBTbpDrQ.pauseVideo();
});

</script>