Customizer video tag

[superfabiuz]

Hello everyone!
I can’t figure out how to customize the “poster” property and the “src” property of video tag for theme export.

I need to change:
poster="assets/images/thumbnail-miami.jpg"
and
src="https://www.fasasoft.eu/video/miami-4k.mp4"

<video controls preload="metadata" poster="assets/images/thumbnail-miami.jpg" controls playsinline controlsList="nodownload">
<source src="https://www.fasasoft.eu/video/miami-4k.mp4" type="video/mp4"
</video>

I also read this post but unfortunately it didn’t help me, maybe I’m doing something wrong.

I tried to use “Add Customizer Control” but with bad results. Can someone help me?

Thanks in advance

[superfabiuz]

I solved the first part, a custom control for the “src” attribute width the control type “url”

<video id="hero_video" autoplay loop muted playsinline controlsList="nodownload"
src="https://www.fasasoft.eu/video/miami-4k.mp4" type="video/mp4"
poster="assets/images/1200x560-frame-miami.jpg"></video>

But how can I also resolve the “url” of the “poster” attribute?
I would like to be able to insert a new “Add Customizer Control” and a new “Theme Mod To Attr” but it is not possible, so I assume that I can only change one attribute.
Am I doing something wrong?
This is a problem! Anyone have any idea how to fix this and can help me?

Thanks in advance.

[RobM]

Hi @superfabiuz,
Sorry for the delay in answering - I had to work it out for myself first!
So to accomplish this you will need two customizer controls. I’m going off of the original HTML you first posted.
The first customizer control to change the source src is what you have already worked out. So this should be applied to the source element.
The second customizer control should be added to the video element. In this case, you add the normal customizer control action. Select a control type of media and a mime type of image.

This will return the id of the media which has to be converted to the url.

NOTE: I used an id of link_poster_preview, change this to what you would like both in the control and custom PHP.

To convert the id to a URL and add in to the video element we will add a PHP code action block. Within the PHP code action block, replace the “Attribute” with an attribute name of poster. Click on the “Get image url from id” checkbox. Then for the function add:

get_theme_mod('link_poster_preview')

Hope this helps,
Bob

[superfabiuz]

Thank you very much Bob, you have been very helpful to me.
Fabio