To create a custom Footer on Video Detail Page, you can follow these.
#1. Create a Page in Not Linked.
Use Name/URL: Custom Video Footer – /custom-video-footer
#2. Next, design the page. Here I use a simple design.
#3. Install this plugin.
Plugin will give you some code to Code Injection Header/Footer
#4. Hover on Video Page > Click Gear icon
#5. Click Advanced > Page Header Code Injection
#6. Insert this code
<div data-wm-plugin="load" data-target="/custom-video-footer"></div>
#7. Use this code to Code Injection > Footer, under plugin code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
document.addEventListener('wmSectionLoader:loaded', ({detail}) => {
if (detail.target !== '/custom-video-footer') return;
$('div.wm-load-container').insertBefore('body:has(article.lesson-item) footer.sections');
})
</script>
#8. Use this code to Custom CSS box
[data-target="/custom-video-footer"] {
display: none;
}
body:has(article.lesson-item) [data-target="/custom-video-footer"] {
display: block;
}
Result
#9. If you want to apply this code to Specific Video Page, you can cut #7 code and paste it under #6 code