Adding video to multicolumn on Symmetry theme

[diamors]

Hello, I was looking to add a video to a multicolumn theme. I wasn't able to find any solutions on the discussion boards or on youtube. 

My website is 

www.clairamor.com

The link to the multicolumn is here

https://clairamor.com/pages/custom-design

Any help is greatly appreciated! 

Best,

Cameron

[BSS-Commerce]

Hi @diamors 

This is BSS Commerce - Full-service eCommerce Agency. We'd love to suggest you this solution:

1. Add a multicolumn to the storefront interface from customize

 

2. Create video data

- At the admin interface, go to Content -> File, and Select Upload files

- Upload your video and video thumbnail on Shopify

Note: With the column link, we will need the links of this video and thumbnail later on. You can get the corresponding link by clicking on the icon 

3. Go to Themes -> Edit Code

Find the theme.js (or global.js) file. Add this js at the end of the file:

if(location.href == 'https://dev-cuong-nm-store.myshopify.com/'){
    const dataVideo = [
    {
        srcVid : `https://cdn.shopify.com/videos/c/o/v/9b6f7f724e224c29a889375b0c8800cd.mp4`,
        srcImg : `//cdn.shopify.com/s/files/1/0672/2558/3913/files/preview_images/3e5183ed6e6043a086c791e8837868c7.thumbnail.0000000000_480x480.jpg?v=1675526172`,
        hVid: "360px", // Video frame height
    },
    {
        srcVid : `https://cdn.shopify.com/videos/c/o/v/9b6f7f724e224c29a889375b0c8800cd.mp4`,
        srcImg : `//cdn.shopify.com/s/files/1/0672/2558/3913/files/preview_images/3e5183ed6e6043a086c791e8837868c7.thumbnail.0000000000_480x480.jpg?v=1675526172`,
        hVid: "360px",
    },
    {
        srcVid : `https://cdn.shopify.com/videos/c/o/v/9b6f7f724e224c29a889375b0c8800cd.mp4`,
        srcImg : `//cdn.shopify.com/s/files/1/0672/2558/3913/files/preview_images/3e5183ed6e6043a086c791e8837868c7.thumbnail.0000000000_480x480.jpg?v=1675526172`,
        hVid: "360px",
    }
];

(function insertVideoToMultiColumn(index, dataVideo) {
    let columns = document.querySelectorAll(".slider-mobile-gutter .multicolumn-list .multicolumn-list__item .multicolumn-card");

        [...columns].splice(index * 3, 3).forEach((column,i) => {
            const {srcVid, srcImg, hVid} = dataVideo[i];
            column.parentNode.style.maxHeight = hVid;
            column.innerHTML = `<video style="object-fit: cover; width: 100%; height: 100%;" playsinline="true" preload="metadata" autoplay="autoplay" 
            loop="loop" muted="muted" poster="${srcImg}"><source src="${srcVid}" type="video/mp4">
                <img src="${srcImg}">
            </video>`;
        });
})(1, dataVideo);
}

With the above code, replace https://dev-cuong-nm-store.myshopify.com/ with your current website path.

4.

Replace srcVid and srcImg values with the thumbnail and video values you uploaded above.
This is what we got
https://www.loom.com/share/b05f615f81bc432398abd57ebbe1ef96

Hope this helps you.