links - Vimeo video play button color function

In the page editor I pasted a Vimeo link:

Which generates the following:

<iframe title="Breakaway Music video Shot on the Canon 7D" src=";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=";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

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

Which generates the following:

<iframe title="Breakaway Music video Shot on the Canon 7D" src="https://player.vimeo/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/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

• functions
• links
• videos
• video-player
• vimeo

Share Improve this question asked Nov 21, 2019 at 18:38 joshmrodgjoshmrodg 1,17311 gold badge1616 silver badges4242 bronze badges 2

• 1 Here is a basic tutorial how to use the yt and vimeo api: css-tricks/play-button-youtube-and-vimeo-api follow the vimeo example (second section of page) and instead of adding a eventListener to the button you could add a css class to it or style it via javascript directly. – Luckyfella Commented Nov 21, 2019 at 18:59
• I'm sorry, I could not figure out how to implement your suggestion. Thank you for taking the time to take a look, but I did end up finding another solution. – joshmrodg Commented Nov 25, 2019 at 17:20

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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/add-custom-class-to-wordpress-iframe-video/

function video_class($html) {
    if (preg_match('/(vimeo)/', $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/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