Page History

Lazy Load YT Video
* Requires adding 2 HTML code blocks (blocksto the page, one for CSS styles and one for JavaScript) to the page
* 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.

CSS (place 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 (place 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 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>