Add header video to one product page

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. 

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)

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!!!

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)

Could you try testing with the video block within the additional info?  https://www.openmotoadv.com/accessories/p/rack01 

Thank you!!

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>

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). 

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>