JQuery Mobile Open Video link inside page

Question

I am using JQuery Mobile version 1.1.1

I have a list of links when link to youTube videos.

<ul>
<li><a href="link to youtube video">See Video</a></li>
</ul>

My problem is that when it opens the video page I cannot get back to the page as there's no Back button and it's no longer inside a JQM page.

How can I open it so that it either has a back button to return to the page of has a way of closing so I can return to the app without restarting it?

Answer 1

I'd suggest using the IFRAME embed method from YouTube:

It can be as easy as setting up an <iframe> like this:

<iframe id="player" type="text/html" width="640" height="390"
  src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1&origin=http://example.com"
  frameborder="0"></iframe>

But you can utilize the YouTube API as well, see these docs for more info: https://developers.google.com/youtube/iframe_api_reference

The IFrame player API lets you embed a YouTube video player on your website and control the player using JavaScript. Unlike the Flash and JavaScript player APIs, which both involve embedding a Flash object on your web page, the IFrame API posts content to an tag on your page. This approach provides more flexibility than the previously available APIs since it allows YouTube to serve an HTML5 player rather than a Flash player for mobile devices that do not support Flash.

Src: The above link

Answer 2

You can have an embedded video player in an HTML page using the new <video> HTML5 tag.

Answer 3

@Jasper is correct that using the iframe embed is the best way to play a video from a mobile site. What was not discussed is what else is involved. Here's a great demo of the new popup functionality in jquery mobile 1.2.0 (as of Oct. 2012):

http://jquerymobile.com/demos/1.2.0/docs/pages/popup/popup-iframes.html