Page 1 of 1

video on Product template

PostPosted: Wed Feb 28, 2018 3:06 pm
by lneibauer
I know that Shopsite recently added some tags for playing videos from the more information page and the tags need to be in the template. Does anyone have or know of a sample template that uses the video playback? I would like to look how the shopsite code should be written to playback a very short video clip. Thanks in advance

Re: video on Product template

PostPosted: Thu Mar 29, 2018 8:33 pm
by ShopSite Lauren
ShopSite's product "Video" field just takes the code that you place in the video field and adds it to the more information page. Then in responsive themes, that code, be it <embed> <video> or <iframe> code, will make it responsive using CSS. Here is an example of how this would be setup in your own custom templates:

Example code in the "Video" field:
Code: Select all
<iframe width="560" height="315" src="https://www.youtube.com/embed/aY-BhQ7TZIM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>


Code in your product template:
Code: Select all
[-- IF PRODUCT.Video --]<div class="video">[-- PRODUCT.Video --]</div>[-- END_IF --]


CSS in your custom template (or custom template's stylesheet):
Code: Select all
.video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}
.video iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

Re: video on Product template

PostPosted: Fri Mar 30, 2018 6:48 am
by lneibauer
Thanks Lauren, I will give it a try