Lazy Load YT Video
* Requires adding 2 HTML code blocks (one for styles and one for JavaScript) to the page
* To generate the video code to add to the modal WYSIWYG, you will need to add the YT video, video name, cover image (if needed), and any other features to a lazy load YT block on a test page. Then view that page's source (or inspect it) and copy the block's code to paste in the modal.
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>
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>
| 
