video on Product template

[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

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

[lneibauer]

Thanks Lauren, I will give it a try