Use customizer to select/edit a video

Beginners
1

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

2

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

image
image834×1022 73 KB

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

<?php
    $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.

image
image1730×388 73 KB

Hope this answers your question!
Bob

3

Thanks RobM! i just tried but getting this error.

image
image1474×789 134 KB

Going to retry from scratch.
Thanks for now.

4

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?
Thanks,
Bob

5

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

image
image942×548 59.8 KB

Thanks for looking.

6

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

7

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

8

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

1 Like