This is a combination of my previous posts below.

jQuery Mobile runtime popup

jQuery Mobile popup vimeo Video

How to build a Vimeo video play list dynamically and on click show the video.
In the first sample here, video is embedded in the same page.
In Second the video is shown in a popup.

Demo 1 – Video in same page
Demo 2 – Video in a popup

Code 1
vimeo_playlist.html


<html>
  
<head>
  
  <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1" />  
  
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js"></script>
<style>
#container
{
 text-align:center;   
}
</style>
</head> 
<script>
    $(document).on('pagebeforechange', function (e, data) {
        if (typeof data.toPage === 'string') {

            var u = $.mobile.path.parseUrl(data.toPage),
			re = /^#video/;

            if (u.hash.search(re) !== -1) {

                var videoId = u.hash.replace(/.*id=/, "");
                var videoName = data.options.link.text();

                $("#container").html('<iframe src="//player.vimeo.com/video/' + videoId + '?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=0" width="300" height="200" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/' + videoId + '">' + videoName + '</a> on <a href="https://vimeo.com">Vimeo</a>.</p>').trigger("create");
                window.scroll(0, 0);
                e.preventDefault();
            }
        }
    });

    $(document).on("pageshow", "#home", function (event) {
        $.mobile.loading('show');
        var url = "http://vimeo.com/api/v2/user13844206/videos.json";

        $.getJSON(url + "?callback=?", null, function (videos) {

            var list = [], video;

            for (var i = 0; i < videos.length; i++) {
                video = videos[i];
                if (video.embed_privacy == "anywhere") {
                    if (i == 0) {
                        $("#container").html('<iframe src="//player.vimeo.com/video/' + video.id + '?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=0" width="300" height="200" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/' + video.id + '">' + video.title + '</a> on <a href="https://vimeo.com">Vimeo</a>.</p>').trigger("create");
                    }
                    list.push('<li><a href="#video?id=' + video.id + '"> <img src="' + video.thumbnail_small + '"> <h2>' + video.title + '</h2> <p>' + video.upload_date + '</p></a> </li>');
                }
            }
            $("#playList").append(list.join('')).listview('refresh');
            $.mobile.loading('hide');
        });
    });

</script>
<body>

    <div data-role="page" id="home">
        <div data-role="header">
            <h1>Video Playlist</h1>
        </div><!-- /header -->
        <div data-role="content"> 
            <div id="container">
            
            </div>
		    <ul data-role="listview" data-inset="true" id="playList">
			 
		    </ul> 
        </div><!-- /content -->
        <div data-role="footer">
            <h4>Video Playlist</h4>
        </div>
    </div>
</body> 
</html>

Code 2
vimeo_playlist_popup.html


<html>
  
<head>
  
  <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1" />  
  
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js"></script>
<style>
#container
{
 text-align:center;   
}
</style>
</head> 
<script>
    $(document).on('pagebeforechange', function (e, data) {
        if (typeof data.toPage === 'string') {

            var u = $.mobile.path.parseUrl(data.toPage),
			re = /^#video/;

            if (u.hash.search(re) !== -1) {

                var videoId = u.hash.replace(/.*id=/, "");
                var videoName = data.options.link.text();

                runtimePopup('<iframe src="//player.vimeo.com/video/' + videoId + '?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=0" width="300" height="200" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/' + videoId + '">' + videoName + '</a> on <a href="https://vimeo.com">Vimeo</a>.</p>');
 
                e.preventDefault();
            }
        }
    });

    $(document).on("pageshow", "#home", function (event) {
        $.mobile.loading('show');
        var url = "http://vimeo.com/api/v2/user13844206/videos.json";

        $.getJSON(url + "?callback=?", null, function (videos) {

            var list = [], video;

            for (var i = 0; i < videos.length; i++) {
                video = videos[i];
                if (video.embed_privacy == "anywhere") {
                    if (i == 0) {
                        $("#container").html('<iframe src="//player.vimeo.com/video/' + video.id + '?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=0" width="300" height="200" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/' + video.id + '">' + video.title + '</a> on <a href="https://vimeo.com">Vimeo</a>.</p>').trigger("create");
                    }
                    list.push('<li><a href="#video?id=' + video.id + '"> <img src="' + video.thumbnail_small + '"> <h2>' + video.title + '</h2> <p>' + video.upload_date + '</p></a> </li>');
                }
            }
            $("#playList").append(list.join('')).listview('refresh');
            $.mobile.loading('hide');
        });
    });


    function runtimePopup(message, popupafterclose) {
        var template = "<div data-role='popup' class='ui-content messagePopup' style='max-width:320px'>"
      + "<a href='#' data-role='button' data-theme='g' data-icon='delete' data-iconpos='notext' "
      + " class='ui-btn-right closePopup'>Close</a> <span> "
      + message + " </span> </div>";

        popupafterclose = popupafterclose ? popupafterclose : function () { };

        $.mobile.activePage.append(template).trigger("create");

        $.mobile.activePage.find(".closePopup").on("tap", function (e) {
            $.mobile.activePage.find(".messagePopup").popup("close");
        });

        $.mobile.activePage.find(".messagePopup").popup().popup("open").bind({
            popupafterclose: function () {
                $(this).unbind("popupafterclose").remove();
                popupafterclose();
            }
        });
    }

</script>
<body>

    <div data-role="page" id="home">
        <div data-role="header">
            <h1>Video Playlist</h1>
        </div><!-- /header -->
        <div data-role="content">  
		    <ul data-role="listview" data-inset="true" id="playList">
			 
		    </ul> 
        </div><!-- /content -->
        <div data-role="footer">
            <h4>Video Playlist</h4>
        </div>
    </div>
</body> 
</html>