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/

Cas Nouwens
  • 395
  • 1
  • 5
  • 25

2 Answers2

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.

Jon Snow
  • 3,682
  • 4
  • 30
  • 51
  • 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?) – Cas Nouwens Mar 23 '15 at 10:11
  • 1
    @CasNouwens I know that you can hide some of the controls, you can see the options in the docs: https://developer.vimeo.com/player/embedding – Jon Snow Mar 23 '15 at 10:55
  • I found this answer, http://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? – Cas Nouwens Mar 23 '15 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 '15 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 – Cas Nouwens Mar 23 '15 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.

Brad Dougherty
  • 908
  • 4
  • 14