0

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

  • 1
    Here is a basic tutorial how to use the yt and vimeo api: css-tricks.com/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 Nov 21 '19 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. – Josh Rodgers Nov 25 '19 at 17:20
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.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);
  1. 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

|improve this answer|||||
  • Glad you found a way to solve your problem and nice you shared it! – Luckyfella Nov 25 '19 at 19:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.