I’m using the Video Block in tagDiv Composer on a page (not a post) with a self-hosted video (no YouTube, no Vimeo, just an MP4 URL).
Before the video starts, I want to show a custom poster image, the same way you can define a thumbnail on Vimeo.
I don’t see any option for this in the block settings.
– Is there a built-in way to set a poster image for a self-hosted video? If not, what’s the recommended approach?
– What image is shown by default? First frame of the video?
Thanks!
Hi,
In that case you could use the single image element. It displays an image -> https://prnt.sc/ioA4VAOxQTOq for which you can set a video popup -> https://prnt.sc/voTWW7hXbs6P
So initially the image is displayed and when the play icon is clicked the video plays in a popup.
For the video embed element there’s no option to display an image before the video unfortunately.
Thank you!
Hi Simion,
Thanks! The single image with the Pop-Up Video Modal works great and is a nice workaround.
However, I noticed that the video in the pop-up modal starts muted as soon as “Autoplay” is enabled. Bettina mentioned here in the forum two years ago that this is the default behavior due to browser restrictions. Is there a workaround for this? When a user clicks the play icon on the image, they expect the video to actually start with sound, rather than having a pop-up open where they have to click play or unmute again.
Also, could you please note down a feature request for a poster image for video embeds? Since self-hosted videos are integrated via HTML5, implementing the standard poster tag should be quite straightforward.
Thanks again!
You could just uncheck the autoplay. The user clicks on the image and clicks to play the video, with sound. If autoplay is selected then the video will be muted, it’s the only that autoplay is permitted.
I’ll add your request to the list. But it mostly depends on the number of requests we receive for it. If it’s not too difficult to do it may be added regardless however.
Thank you!
Hi Simion,
thx four your reply. Just a quick heads-up for your records, no urgent action needed from my side.
The self-hosted video modal in Newspaper (the td-image-video-modal trigger that opens #td-video-modal / .td-vm-wrap and plays the video) does not work correctly together with WP Rocket when its standard optimizations are active (Remove Unused CSS, Minify CSS/JS, defer, and Delay JavaScript execution).
Two separate effects:
On desktop, RUCSS strips the .td-vm-wrap CSS rules because the modal markup only exists after the click, so it renders unstyled and the video drops into the page flow instead of opening as an overlay. Adding .td-vm-wrap to the WP Rocket CSS safelist fixes this.
On real mobile devices (not desktop emulation), the modal does not open at all on tap. This one seems to be on the JS side, likely tdAjaxVideoModal.js being held back by Delay JavaScript execution so the delegated click handler isn’t bound on the first tap. With ?nowprocket everything works.
I know WP Rocket may count as an untested third party plugin on your end, but given how common this combination is in the wild, I just wanted to pass the details along in case it’s useful for compatibility.
Thanks and best regards
Thank you for the details. Optimization can indeed cause some things to not function correctly. Such issues could be fixed by excluding certain resources from the optimization. Thankfully WP Rocket has such options, it’s a very good and popular plugin. So with some checking and tuning the website will still be very fast but also there won’t be any broken elements.
Thank you!
