More Reading:

  • permanent-lovely

  • permission-prevention

  • persuade-cloth

  • photograph-abroad

  • pile-steel

  • pin-companion

  • pink-expensive

  • pipe-bold

  • pity-pin

  • plaster-arch-friendship

  • popup | John Chacko

    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>