ceesay Posted April 22 Share Posted April 22 Is there any way to add a header background video to one product page? Because videos can only be placed in 'Additional Info', it's all the way on the bottom due to all the images. We originally had the header video on the Accessories page, but the client didn't want the video (showcasing the rack) on the hats and tshirts filtered pages. Link to comment
tuanphan Posted April 25 Share Posted April 25 Add Fullwidth video under header, above breadcrumb or which position? If you let me know which exact position, I can give you code to do this (I used to help a member with adding video to Event Detail Page, so I think Product is possible) Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
ceesay Posted May 6 Author Share Posted May 6 Hi! Thanks so much for responding. We would like it to be like this: https://www.openmotoadv.com/accessories/hats, but on this page: https://www.openmotoadv.com/accessories/p/rack01 Much appreciate any help!! Thank you!!! Link to comment
tuanphan Posted May 9 Share Posted May 9 2 options to do this Option 1. Create a Not Linked Page > Add video there, then use code to move it to top of a product. This will require a custom plugin + code Option 2. Add video to Footer, then use code to append it to top of a product. But I think if you can add a Video Block to Additional Info, I will try testing some code to achieve similar (I haven't tried this yet, but I think maybe it's still possible) Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
ceesay Posted May 10 Author Share Posted May 10 Could you try testing with the video block within the additional info? https://www.openmotoadv.com/accessories/p/rack01 Thank you!! Link to comment
tuanphan Posted May 12 Share Posted May 12 On 5/10/2024 at 10:28 PM, ceesay said: Could you try testing with the video block within the additional info? https://www.openmotoadv.com/accessories/p/rack01 Thank you!! You can add a Code Block under Video Block > Paste this code <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> jQuery(document).ready(function($){ $('section.ProductItem-additional .video-block').insertBefore('article>section:first-child'); }); </script> <style> .video-block video { object-fit: cover !important; } .plyr__poster { background-size: cover !important; } .video-block+section { padding-top: 10px !important; } .video-block { padding: 0px !important; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
ceesay Posted May 15 Author Share Posted May 15 Hi, Tuanphan! I cannot thank you enough for figuring this out for me. I hate to ask, any way for the video be around 444px high (ie. https://www.openmotoadv.com/accessories/hats )? It's fine that it's cropped off (the video itself is not great but the client really likes it). Link to comment
tuanphan Posted May 17 Share Posted May 17 On 5/15/2024 at 10:38 PM, ceesay said: Hi, Tuanphan! I cannot thank you enough for figuring this out for me. I hate to ask, any way for the video be around 444px high (ie. https://www.openmotoadv.com/accessories/hats )? It's fine that it's cropped off (the video itself is not great but the client really likes it). Use this code under <style> article#sections>.video-block .video-player { padding-top: 30% !important; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment