javascriptiframevimeo-player

"user friendly" vimeo embedding, get embed code from url


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/


Solution

  • 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.