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=";byline=0&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

from a url such as: ?

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 in there and press generate, it outputs:

<object type="application/x-shockwave-flash" style="width:450px; height:366px;" data=".swf?clip_id=22439234&amp;server=vimeo&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...

/

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./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./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./22439234 in there and press generate, it outputs:

<object type="application/x-shockwave-flash" style="width:450px; height:366px;" data="http://vimeo./moogaloop.swf?clip_id=22439234&amp;server=vimeo.&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./online_tools/vimeo_xhtml/

• javascript
• iframe
• vimeo-player

3 Answers 3

Here's a fiddle with the solution: http://jsfiddle/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)\..*(?:videos|video|channels|)\/([\d]+)/i;
    var parsed = val.match(vimeoRegex);

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

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

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

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

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

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

A less brittle approach would use the Vimeo Player SDK. You can generate the whole iframe code by passing either the ID or the usual video URL.

<div id="myVideo"></div>

<script>
  const options = {
    url: "https://player.vimeo./video/76979871?h=8272103f6e",
  };

  const videoPlayer = new Vimeo.Player('myVideo', options);
</script>