1

I'm working on a way for the client (user) to get the iFrame from vimeo to play a different video.. this is proving more difficult for me than previously anticipated. the changing of the video has to be done via a text-box.

if at all possible, how can i extract the embed code like this:

<iframe src="https://player.vimeo.com/video/22439234?title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

from a url such as: https://vimeo.com/22439234 ?

How can i retrieve the iframe, src attribute value or anything i can use from the above example?

I've googled around a bunch, but all instructions I have found are directed at developers...

(I'm using Angularjs, so any Javascript or Angular solutions are acceptable)

EDIT: I found a website that does what i want, might help you understand what i want to do..

if you paste https://vimeo.com/22439234 in there and press generate, it outputs:

<object type="application/x-shockwave-flash" style="width:450px; height:366px;" data="http://vimeo.com/moogaloop.swf?clip_id=22439234&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=ff9933&amp;fullscreen=1" allowfullscreen="true" allowscriptaccess="always">

Get your own valid XHTML Vimeo embed code

that's exactly what i need, except for the fact that it's not an iFrame...

http://www.tools4noobs.com/online_tools/vimeo_xhtml/

2 Answers 2

11

Here's a fiddle with the solution: http://jsfiddle.net/ost9y204/

If you have an input where the user pastes the URL:

<input id="video">

You can parse the Vimeo URL with this function:

function parseUrl(){
    var val = document.getElementById('video').value;
    var vimeoRegex = /(?:vimeo)\.com.*(?:videos|video|channels|)\/([\d]+)/i;
    var parsed = val.match(vimeoRegex);

    return "//player.vimeo.com/video/" + parsed[1];    
};

And whenever you need to get the URL, just call parseUrl(). Then put the returned value in the iframe's src.

5
  • Thanks for the answer, I've got a followup question... I wish to use the outputted link as a background for the site. the problem i'm running into now is: the controls are there. (play, pause button, bufferbar, share, etc.) Do you have any idea how to get those off? (the client i'm making this for, will have a pro account. i know it can be done when you have a pro account, but i don't want to buy one myself. can it be done, code-wise? or is it a setting when requesting the embed code from Vimeo?) Mar 23, 2015 at 10:11
  • 1
    @CasNouwens I know that you can hide some of the controls, you can see the options in the docs: developer.vimeo.com/player/embedding
    – Jon Snow
    Mar 23, 2015 at 10:55
  • I found this answer, stackoverflow.com/a/21113784/2738980, but the comment states that it's against the API rules. By my knowledge, I don't use the API, is it forbidden for me to apply that solution? Mar 23, 2015 at 11:06
  • 1
    AFAIK the ToS still apply in this situation. From what I'm seeing in that answer the controls are just being moved out of the viewport so it also means that a part of your video will be hidden as well.
    – Jon Snow
    Mar 23, 2015 at 11:13
  • 1
    Aah, i see. thanks for all the help. I'll accept the answer because it answers my initial question. a personal thanks for sticking around after the first answer to help with the rest as well... Sometimes it seems like people just want the upvotes and accepts instead of help people on here Mar 23, 2015 at 11:33
3

The best way to do this is to use the oEmbed API: https://developer.vimeo.com/apis/oembed

For the link you provide in the question, you would make a request to:

https://vimeo.com/api/oembed.json?url=https%3A//vimeo.com/22439234

That will give you back a JSON object that has an html key with the embed code.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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