Vimeo video play button color function

Question

In the page editor I pasted a Vimeo link: https://vimeo.com/253989945

Which generates the following:

<iframe title="Breakaway Music video Shot on the Canon 7D" src="https://player.vimeo.com/video/10679287?dnt=1&app_id=122963" width="580" height="326" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="" data-origwidth="580" data-origheight="326" style="width: 580px; height: 326px;"></iframe>

What I'd like to do is add an argument like &color=f1d925

Which would look like:

<iframe title="Breakaway Music video Shot on the Canon 7D" src="https://player.vimeo.com/video/10679287?dnt=1&color=f1d925&app_id=122963" width="580" height="326" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="" data-origwidth="580" data-origheight="326" style="width: 580px; height: 326px;"></iframe>

I can copy and paste the iframe code, but the user just wants to be able to copy and paste the url.

I found some code that would allow me to pass the parameter through an [embed][/embed] shortcode, but the user is still having trouble with this method.

I'm thinking there is something I could add to functions.php that would take care of all these links at once or maybe some jQuery.

Does anyone know what WP calls this functionality or know of a function or something that could help?

Thanks, Josh

Answer 1

I did a couple of things to fix this issue...

1. I added a function that adds a class to my Vimeo iFrame:

https://wp-time.com/add-custom-class-to-wordpress-iframe-video/

function video_class($html) {
    if (preg_match('/(vimeo.com)/', $html)) {
        return str_replace('<iframe', '<iframe class="video"', $html);
    } else {
        return $html;
    }
}
add_filter('embed_oembed_html', 'video_class', 99, 4);

2. I implemented some JS to change the properties of the embed:

https://jsfiddle.net/tfj8pow9/

$(document).ready(function() {
    $('.video').each(function(index) {
        var new_src = $(this).prop('src') + '&color=f1d925';
        $(this).prop('src', new_src)
    });
});

That's it! Now everything is working as expected :-)

Thanks,
Josh