Use customizer to select/edit a video

Hi All,
Any idea on how to make a video editable in the customizer just as the image element. I have a div with a video in it (html5) and I need the capability to change edit this field and choosing another video. Just like you can change and image or a background image. Maybe with the src attribute…
Any idea?
Thanks all

Hi @red-rosefields,
There isn’t currently a smart action for changing a video, as far as I know.
The way I would do it is to create a container for the video. In PG you can add a video in and set it to not export with the WP actions.
Then on the container you can set-up your customizer control like normal with a control type of media and a mime type of video. Since this will return an attachment id you can sanitize with ‘absint’.

Next, you will have to add in a block of PHP code inside the container

    $id = get_theme_mod('video_control');
    $attr = array( 'src' => wp_get_attachment_url( $id ) );
    echo wp_video_shortcode( $attr );

Note: I used ‘video_control’ as the id for my customizer control. If you change that id you will have to change it in the PHP block as well. Here is the whole thing.

Hope this answers your question!

Thanks RobM! i just tried but getting this error.

Going to retry from scratch.
Thanks for now.

Not sure what is going on with the error. What is ‘cb-main.js’? Is the video that you are trying to bring in wrapped in some type of jQuery loader? If so, maybe your’cb-main.js’ is being loaded before jQuery?

Can you share a screen shot of your customizer/video container so I can take a look?

cb-main.js is this chockablock that I tried but never used it. I just deleted the script.

Thanks for looking.

For the control block the sanitize callback should be ‘absint’ - absolute integer.
Can you show the block of PHP code, as well?

It worked! You just made my day easier!
Many thanks man, appreciate the time you took on answering.

Thanks for sharing, it has helped me reduce my time in editing work a lot

1 Like