Buy me a coffee

Add a Video Banner to top of a Product (Use Video in Additional Info)

#1. First, edit the Product where you want to add a Video Banner > Edit Additional Info > Add a Video Block.

#2. Use this code to Code Block (under Video Block)

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

Add A Video Banner To Top Of A Product Use Video In Additional Info 01 Min

#3. Result

Add A Video Banner To Top Of A Product Use Video In Additional Info 02 Min