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 a lazy load YT block to a test page with
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 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>
| 