1

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?

3 Answers 3

4

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

2
  • Where does the iframe exist in the DOM? Are you adding it dynamically, or should it already exist and then you set the src attribute using jquery? Is the iframe inside a dialog that's being opened by the link?
    – Redtopia
    Oct 16, 2012 at 18:43
  • 1) Wherever you want your user to see it. 2) Either will work. 3) When I've done this, I just placed the IFRAME in the data-role="content" section of the page and set it's width to 100% (you can keep the aspect ratio if you adjust the height on window.resize).
    – Jasper
    Oct 16, 2012 at 19:30
0

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

0

@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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.