Developer Journal: 15 June 2020
Posted on Mon 15 June 2020 in dev-journal
Another day working with Craft CMS
Using the codebase that the client gave me I was struggling to figure out how they were embedding their youtube videos into a page. The html for the section I was trying to duplicate looks like this:
<section id="intro" class="">
<div class="container-fluid">
{% if entry.getEnableVal('livestreamVideoUrl') == 1 and entry.livestreamVideoUrl != '' %}
<div class="row py-5">
<div class="col">
{% if entry.getEnableVal('livestreamVideoUrl') == 1 and entry.livestreamVideoUrl != '' %}
<div class="container embed-responsive embed-responsive-16by9">
<div id="player"></div>
<div id="play-button-overlay" class="embed-responsive-item programming-image-overlay">
<span class="helper"></span>
<img src="images/playbutton-50.png">
</div>
</div>
{% endif %}
</div>
</div>
{% endif %}
</div>
</section>
Using that code would cause an error when I tried to push play on the video overlay. There was a small clue on the bottom of the html that led to the eventual solution:
{% set Programing_video_url = entry.ProgramingVideoUrl %}
{% set Programing_video_image_src = "" %}
{% for asset in entry.ProgramingVideoThumbnailImage %}
{% set Programing_video_image_src = asset.url %}
{% endfor %}
<script>
var Programing_video_url = "{{ Programing_video_url }}";
var Programing_video_image = "url(..{{ Programing_video_image_src }})";
</script>
The script tag is what eventually led me to look at the javascript file. That's when I found that js was being used to generate the youtube video embed and set the background image.
if(currentPage.endsWith("-programming")) {
videoID = $.trim( Programing_video_url ) ;
$('.-programming-image-overlay').css("background-image",Programing_video_image);
} else if(currentPage.endsWith("-app")) {
videoID = "randomVideoId";
} else if(currentPage.endsWith("about-us")) {
videoID = $.trim( aboutUs_video_url ) ;
$('.about-us-image-overlay').css("background-image",aboutUs_video_image);
} else if(currentPage.endsWith("session-descriptions")) {
videoID = $.trim( sessionDescriptions_video_url ) ;
$('.session-descriptions-image-overlay').css("background-image",sessionDescriptions_video_image);
}else if(currentPage.endsWith("nurses-techs")) {
videoID = $.trim( nursesAndTechsTargetAudience_video_url ) ;
$('.nurses-and-techs-TA-overlay').css("background-image",nursesAndTechsTargetAudience_video_image);
} else if(currentPage.endsWith("vlf")) {
videoID = $.trim( vlf_live_stream_video_url ) ;
$('.vlf-image-overlay').css("background-image",vlf_live_stream_video_image);
}else if(currentPage.endsWith("physicians-in-training")) {
videoID = $.trim( PIT_video_url ) ;
$('.pit-image-overlay').css("background-image",PIT_video_image);
}else if(currentPage.endsWith("disruptive-tech")) {
videoID = $.trim( DT_video_url ) ;
$('.dt-image-overlay').css("background-image",DT_video_image);
}else if(currentPage.endsWith("clinical-trials")) {
videoID = $.trim( LB_video_url ) ;
$('.lateBreaking-image-overlay').css("background-image",LB_video_image_src);
Obviously there is a better way without having to add an else statement to the js every time you want to add a video to a page. So here is what I did. I added a data attribute to the html to hold the video id:
<section id="intro" class="" data-video-id="{{entry.livestreamVideoUrl}}">
...
</section>
Then from there I added an else if to the javascript to look for the
data-video-id attribute and set that to the videoID. Now it is more dynamic
and all that will need to be done on other pages is add the data-video-id
attribute.
...
else if (document.querySelectorAll('[data-video-id]')){
const vid = document.querySelectorAll('[data-video-id]')[0];
videoID = $(vid).data('video-id');
}