Playing a video in full screen as default

Hi all

I launched a webapp last night… www.trailer8.com and I am wondering if anyone would have any idea how to make a youtube video on the app play in full screen, particularly on mobile?

At the moment you need to rotate the device to landscape and then press the full screen icon on the video.

@andmilne You could use this JavaScript function to call a full screen… though I’d have to play around with screen size of the actual video. At least its a start…

  1. Download the ‘Toolbox’ plugin
  1. Place a button on the page
  2. Enter a name for the ID Attribute on the video itself (i.e ‘vid’)
  3. Start a workflow on button
  4. Run JavaScript
  5. Paste Code and try a Preview

var elem = document.getElementById(“vid”);
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}

*Edit: Here’s how to make the video full screen.

  1. Download the CSS Tools plugin by ZeroQode
  1. Place CSS element on page.

  2. After the ‘Run Javascript’ action in the workflow, add another action:
    Element Actions > Add Custom Style To Head a CSS Tools

  3. Enter this CSS

.vid {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

iframe {
/* optional */
width: 100%;
height: 100%;
}

Example to help you out:

**Edit #2… Just read your post that you were looking for mobile… Don’t think this would work…

2 Likes

Thanks very much all the same. Will still look into it.