Scot Ranney • July 10, 2024
Custom Field Videos
Create a custom field for a YouTube video url. This works for long and short video URLs that have v= or s= in them (use share links for shorts.) Sometimes the vid short links without s= will work as well.
Create a custom product field (in this case the code is youtube as you can see in the code below) that you put a YouTube video URL in.
Tip: Put a link to the product as the first comment after adding the video.
Related Videos: Make sure rel=0 is added to the embed url so random video suggestions don't pop up. This will force the video suggestions to come from the same account.
<mvt:comment>
#
YOUTUBE VIDEOS: We do some smt voodoo to control the embed via a URL posted in a product custom field
https://www.youtube.com/watch?v=7idtVo8vgDk
https://www.youtube.com/shorts/hnRUwY2azgc
https://youtube.com/shorts/hnRUwY2azgc?si=RwCP4aRiiEaIRHTJ
#
</mvt:comment>
<mvt:if expr="l.settings:product:customfield_values:customfields:youtube">
<mvt:if expr="'v=' CIN l.settings:product:customfield_values:customfields:youtube">
<mvt:assign name="l.settings:vid" value="gettoken(l.settings:product:customfield_values:customfields:youtube,'=',2)" />
<mvt:assign name="l.settings:vid" value="l.settings:vid $ '&rel=0'" />
<mvt:else>
<mvt:assign name="l.settings:vid" value="gettoken(l.settings:product:customfield_values:customfields:youtube,'?',1)" />
<mvt:assign name="l.settings:vid" value="glosub(l.settings:vid,'https://youtube.com/shorts/','')" />
<mvt:assign name="l.settings:vid" value="glosub(l.settings:vid,'https://www.youtube.com/shorts/','')" />
<mvt:assign name="l.settings:vid" value="l.settings:vid $ '?rel=0'" />
</mvt:if>
<iframe style="width: 100%; aspect-ratio: 16/9;"
src="https://www.youtube.com/embed/&mvt:vid;"
title="Treasures of the Southwest &mvte:product:name; video"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen></iframe>
</mvt:if>Scot's Image Manager
Requirements: Shadows, Featherlight gallery, and the user is using thumbnails and the YouTube video url feature.
<section class="o-layout o-layout-wide">
<div class="o-layout__item u-width-12 u-width-7--l ps-sm-0">
<mvt:comment>
#
# scot's image gallery using Unite Gallery with additional code to handle youtube vids
#
</mvt:comment>
<mvt:assign name="l.settings:scotsimg" value="''" />
<mvt:item name="scotsimg" param="load_product_images()" />
<section data-featherlight-gallery data-featherlight-filter="a">
<mvt:if expr="l.settings:scotsimg:image">
<mvt:comment>
<div class="mb-5 d-flex flex-wrap align-items-center" style="min-height: 200px;">
</mvt:comment>
<div class="mb-5 pt-3 text-center" style="min-height: 200px;">
<mvt:assign name="l.settings:image" value="l.settings:scotsimg:image" />
<mvt:assign name="g.social_image" value="l.settings:image:settings:full_path" />
<mvt:if expr="trim(l.settings:image:seo_title)">
<mvt:assign name="l.settings:image_title" value="l.settings:image:seo_title" />
<mvt:else>
<mvt:assign name="l.settings:image_title" value="l.settings:product:name" />
</mvt:if>
<mvt:if expr="trim(l.settings:image:seo_alt)">
<mvt:assign name="l.settings:image_alt" value="l.settings:image:seo_alt" />
<mvt:else>
<mvt:assign name="l.settings:image_alt" value="l.settings:product:name" />
</mvt:if>
<a class="gallery" href="&mvt:image:settings:full_path;">
<img src="&mvt:image:settings:full_path;" alt="&mvt:image_alt;" title="&mvt:image_title;" class="img-fluid">
</a>
</div>
<mvt:elseif expr="l.settings:product:image">
<img src="&mvt:product:image;" alt="&mvte:product:name;" title="&mvte:product:name;" class="img-fluid">
</mvt:if>
<mvt:if expr="miva_array_elements(l.settings:scotsimg:images) GT 1">
<mvt:foreach iterator="image" array="scotsimg:images">
<mvt:assign name="l.settings:thumb_counter" value="l.settings:thumb_counter + 1" />
<mvt:comment>
#
# skip first thumb
#
</mvt:comment>
<mvt:if expr="l.settings:thumb_counter EQ 1">
<mvt:foreachcontinue />
</mvt:if>
<mvt:if expr="'.mp4' CIN l.settings:image:settings:full_path">
<mvt:comment> added to <a below to force 85% size window: data-featherlight-iframe-style="display:block;border:none;height:85vh;width:85vw;"</mvt:comment>
<a class="gallery video" href="&mvt:image:settings:full_path;" data-featherlight="iframe" data-featherlight-iframe-frameborder="0" data-featherlight-iframe-allow="autoplay; encrypted-media" data-featherlight-iframe-allowfullscreen="true" >
<mvt:if expr="l.settings:image:settings:thumbnail AND '.mp4' CIN l.settings:image:thumbnail LE 0">
<img class="img-thumbnail mb-3 me-2 thumb" alt="&mvt:image_alt; &mvt:thumb_counter;" src="&mvt:image:settings:thumbnail;">
<mvt:else>
<img class="img-thumbnail mb-3 me-2 thumb" alt="&mvt:image_alt; &mvt:thumb_counter;" src="/video/play-video.png">
</mvt:if>
</a>
<mvt:elseif expr="l.settings:image:settings:youtube_id">
<mvt:if expr="'/shorts/' CIN l.settings:image:settings:youtube_url">
<a class="gallery video"
href="https://www.youtube.com/embed/&mvt:image:settings:youtube_id;?rel=0"
data-featherlight="iframe"
data-featherlight-iframe-frameborder="0"
data-featherlight-iframe-allow="autoplay; encrypted-media"
data-featherlight-iframe-allowfullscreen="true"
data-featherlight-iframe-referrerpolicy="strict-origin-when-cross-origin"
data-featherlight-iframe-style="display:block;border:none;height:85vh;width:85vw;">
<mvt:else>
<a class="gallery video"
href="https://www.youtube.com/embed/&mvt:image:settings:youtube_id;?autoplay=1&rel=0"
data-featherlight="iframe"
data-featherlight-iframe-frameborder="0"
data-featherlight-iframe-allow="autoplay; encrypted-media"
data-featherlight-iframe-allowfullscreen="true"
data-featherlight-iframe-referrerpolicy="strict-origin-when-cross-origin"
data-featherlight-iframe-style="display:block;border:none;height:85vh;width:85vw;">
</mvt:if>
<img class="img-thumbnail mb-3 me-2 thumb" alt="&mvt:image_alt; &mvt:thumb_counter;" src="&mvt:image:thumbnail;">
</a>
<mvt:else>
<a class="gallery" href="&mvt:image:settings:full_path;">
<img class="img-thumbnail mb-3 me-2 thumb" alt="&mvt:image_alt; &mvt:thumb_counter;" src="&mvt:image:thumbnail;">
</a>
</mvt:if>
</mvt:foreach>
</mvt:if>
</section>Featherlight CSS:
<mvt:comment>
#
# featherlight css
# https://github.com/noelboss/featherlight
#
</mvt:comment>
<link href="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css" type="text/css" rel="stylesheet" />
<link href="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.gallery.min.css" type="text/css" rel="stylesheet" />
<style>
.featherlight-previous span, .featherlight-next span {
color: #455534 !important;
}
.featherlight-previous:hover, .featherlight-next:hover {
background: none !important;
}
.thumb {
max-width: 110px;
max-height: 110px;
}
.x-a11y-tabs__list { display: block !important; }
.x-a11y-tabs__panel {
margin: 0 !important;
max-width: 100% !important;
}
.x-product-list--related {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 40em) {
.x-product-list--related {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
}
@media (min-width: 90em) {
.x-product-list--related {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
}
#product-descrip a {
color: #175672;
font-weight: bolder;
}
.holiday-image {
position: relative;
left: -1px;
}
</style>Featherlight JS: Includes touch swipe library.
<mvt:comment>
#
# Featherlight image plugin
#
</mvt:comment>
<script src="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.gallery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/detect_swipe/2.1.1/jquery.detect_swipe.min.js"></script>
<script>
$('a.gallery').featherlightGallery({
previousIcon: '«',
nextIcon: '»',
galleryFadeIn: 300,
openSpeed: 300
});
</script>