5

I want to play a youtube video in fullscreen on click of a button. I currently have the following iframe:

<div class="youtube-trailer">
    <iframe class="youtube-player" type="text/html" src="http://www.youtube.com/embed/whatever" allowfullscreen frameborder="0"></iframe>
</div>

On Safari Mobile, specifically, when a press the Play button the video launches in full screen which is the desired behavior. This is fine. I don't want the iframe displayed on the page though. I just want a button that will open the video in fullscreen using the native video player. i.e. i don't want to create an overly-elaborate lightbox to house the video.

Anyone have any ideas?

garethdn
  • 12,022
  • 11
  • 49
  • 83
  • 1
    what's the content of your youtube-trailer class? – happy May 26 '13 at 20:51
  • Have you had a look at [this](http://stackoverflow.com/questions/4345033/play-youtube-videos-in-fullscreen-auto?rq=1) question? I'm not sure if it can help. – nicholaschris May 26 '13 at 20:55
  • I'm not sure of the relevance of my `youtube-trailer` class but it's `.youtube-trailer { position: relative; margin:20px 10px; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; }`. – garethdn May 26 '13 at 20:58
  • 2
    @nicholaschris That question appears to relate directly to Obj-C and is almost 2 and a half years old – garethdn May 26 '13 at 21:00
  • html5 videos default to full screen on ios from iphone. – BingeBoy May 27 '13 at 04:14
  • @BingeBoy So can you tell me how do I trigger the playing of the video using another button (i.e. not the default YouTube play button). As I said I'm happy with the video being played in fullscreen - it's what i want – garethdn May 27 '13 at 10:24
  • I just made a test page and it loaded video in fullscreen: – BingeBoy May 27 '13 at 13:43
  • @BingeBoy not defaults to - is restricted only to. iPad video can be 'in-page' but even iPhone 6 restricts all HTML 5 video to fullscreen. – Simon_Weaver May 22 '15 at 04:05
  • @Simon_Weavery yes is this a specific question for ipads? I replied years ago... – BingeBoy Jun 03 '15 at 02:32

1 Answers1

10

The standard youtube video link format is:

http://www.youtube.com/watch?v=Lv-sY_z8MNs

You can link directly to the full screen video (without opening a new window) by adding "_popup" after "watch" in the URL:

http://www.youtube.com/watch_popup?v=Lv-sY_z8MNs

This should work for both mobile and desktop browsers. Naturally, if you did end up wanting to open your link in a new page, simply add "target="_blank" to your opening anchor tag.

Victor Paredes
  • 111
  • 1
  • 7