Shopify

Reworked Deferred YouTube widget, several times! Latest has move Javascript in to theme's assets/global.js as follows:

/* Custom Igennus JavaScript */
function deferred_video_play(paFrameId, vidFrameId) {
let paFrame = document.getElementById(paFrameId); // Must be same as pa_div_id in Template tab
let vidFrame = document.getElementById(vidFrameId); // Must be same as yt_frame_id in Template tab
paFrame.style.display = "none";
vidFrame.style.display = "inline";
vidFrame.setAttribute('src',vidFrame.getAttribute('data-src'));
}
/* End of custom Igennus JavaScript */

This allows, and makes it easier to edit, mulitple widgets on a page.

Current widget is called "YouTube deferred play with title 100% wide (2024-08-15)" in the Library and currently has Template:

{% # The YouTube video ID, the last part of the URL or the ID grabbed from YouTube Studio. %}
{% # If there is an ampersand towards the end of the ID, maybe with parameters after, e.g. t=6, remove the ampersand and everything that follows. %}
{% assign youtube_vid_id = "s7vOfh9ewd8" %}

{% # The entire thumbnail link acquired from the Shopify files section or elsewhere %}
{% assign initial_image = "https://cdn.shopify.com/s/files/1/0087/7097/7888/files/neurobalance_video_thumb_1.jpg?v=1722597653" %}

{% # You can add an optional title banner. If this is left blank nothing will show. %}
{% assign optional_title_text = "" %}

{% # If you want multiple Deferred YouTube widgets the following IDs must be unique on the page %}
{% assign pa_div_id = "pa-2" # The paFrame parameter in the Script tab must be changed to the same as this value%}
{% assign yt_frame_id = "vf-2" # The vidFrame parameter in the Script tab must be changed to the same as this value%}

{% assign script_id = "deferred_video_play" # DO NOT CHANGE THIS UNLUESS YOU ARE SURE! %}







{% if optional_title_text.size > 0 %}



{{ optional_title_text }}


{% endif %}






CSS:

.video_i{
background:#FFFFFF;
z-index:1 !important;
position:relative;
top:0;
left:0;
width:100%;
aspect-ratio: 16 / 9;
cursor: pointer;
}
.spi_1{
position:absolute;
width:100%;
top:0;
bottom:0;
margin:auto;
width:4em;
left:48%;
}
.spi_2{
position:absolute;
bottom:10px;
width:172px;
left:0px;
}
.spi_3{
display: inline;
position: absolute;
top: 10px;
width: 97%;
left: 0px;
height: 5rem;
background-color: gray;
opacity: 0.8;
padding: 5px;
}
.spi_4{
}
.spi_5{
width: 42px;
float: left;
transform: translate( 5px, -50%);
margin: 0;
top: 50%;
left: 0;
position: absolute;
}
.t1{
font-family: Source Sans Pro,Open Sans,sans-serif,sans !important;
font-size: 1.4rem;
color: white;
position: absolute;
top: 50%;
left: 55px;
line-height: 2rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
transform: translate(0, -50%);
margin: 0;
margin-right: 0.8rem;
}

and Script:

/*
function vid_init_1(paFrameId, vidFrameId) {
let paFrame = document.getElementById(paFrameId); // Must be same as pa_div_id in Template tab
let vidFrame = document.getElementById(vidFrameId); // Must be same as yt_frame_id in Template tab
paFrame.style.display = "none";
vidFrame.style.display = "inline";
vidFrame.setAttribute('src',vidFrame.getAttribute('data-src'));
}
*/

just to record the old placement of the now global JavaScript.