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">
            {% endif %}
    {% endif %}

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 %}

var Programing_video_url = "{{ Programing_video_url }}";
var Programing_video_image = "url(..{{ Programing_video_image_src }})";

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 ) ; 
} else if(currentPage.endsWith("-app")) {
    videoID = "randomVideoId";
} else if(currentPage.endsWith("about-us")) {
    videoID = $.trim( aboutUs_video_url ) ;
} else if(currentPage.endsWith("session-descriptions")) {
    videoID = $.trim( sessionDescriptions_video_url ) ;
}else if(currentPage.endsWith("nurses-techs")) {
    videoID = $.trim( nursesAndTechsTargetAudience_video_url ) ;
} else if(currentPage.endsWith("vlf")) {
    videoID = $.trim( vlf_live_stream_video_url ) ;
}else if(currentPage.endsWith("physicians-in-training")) {
    videoID = $.trim( PIT_video_url ) ;
}else if(currentPage.endsWith("disruptive-tech")) {
    videoID = $.trim( DT_video_url ) ;
}else if(currentPage.endsWith("clinical-trials")) { 
    videoID = $.trim( LB_video_url ) ;

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}}">

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');