How to show Full-screen Vimeo and YouTube Videos

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
Wanderlust
Jr. Propeller Head
Posts: 8
Joined: Wed Feb 10, 2016 12:17 pm

How to show Full-screen Vimeo and YouTube Videos

Post by Wanderlust »

If you are using the Tripane format, this is how to display a Vimeo or YouTube video in Full-screen mode. (Full credit for this fix goes to Michael Torres, on the MadCap Support Team.)
(You have to modify part of the Application files to do this, so be careful.)

First, you have to add the iframe to your help topic.

For Vimeo

Code: Select all

<!-- Vimeo --><iframe src="http://player.vimeo.com/video/YourVimeoNumberHere" width="640" height="360" frameborder="0" webkitallowfullscreen="1" mozallowfullscreen="1" allowfullscreen="1"></iframe>
For YouTube

Code: Select all

<!-- YouTube--><iframe src="https://www.youtube.com/embed/xdw2nL4BoHw" width="640" height="360" frameborder="0" allowfullscreen="1"></iframe>

Now you need to modify the app file.
1. Go to the following location: C:\Program Files\MadCap Software\MadCap Flare 12\Flare.app\Resources\WebHelp2\Desktop
2. Open this file: Default_TriPane.htm (Open it in Notepad, or whatever HTML editor you use.)
3. Go to Line 212, to find this code.
4. Add the following code, as shown in the screencap:

Code: Select all

allowfullscreen="0" mozallowfullscreen="0" msallowfullscreen="0" oallowfullscreen="0" webkitallowfullscreen="0"
FlareFullScreen.png
So you will go from this... with disabled Full Screen controls.
FlareFullScreen2.png
To this. Yay!
FlareFullScreen3.png
You do not have the required permissions to view the files attached to this post.
Last edited by Wanderlust on Tue Feb 14, 2017 8:41 am, edited 2 times in total.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: How to show Full-screen Vimeo and YouTube Videos

Post by NorthEast »

The problem with editing app files is that you need to remember to make that change on every PC using Flare, and repeat it every time you update or reinstall Flare.

I think a better way would be to add that attribute using a script, so that it's part of your Flare project.

If you open your Tripane skin, go to the Toolbar tab, then click Edit on the right (to add custom javascript).
Add this script:

Code: Select all

$(document).ready(function(){
	/* fix to allow videos to be displayed full screen inside an iframe */
	$("iframe#topic").attr( "allowfullscreen", "True" );
});
mpaquette
Propeller Head
Posts: 12
Joined: Thu May 22, 2014 1:35 pm
Location: Montreal
Contact:

Re: How to show Full-screen Vimeo and YouTube Videos

Post by mpaquette »

I second David Lee's solution.

Related: viewtopic.php?f=9&t=18742#p117502

I hope this helps.

Marc.
Marc Paquette | Technical Writer
FlareLint is open source software to reduce production time and improve quality: https://flarelint.github.io/
Wanderlust
Jr. Propeller Head
Posts: 8
Joined: Wed Feb 10, 2016 12:17 pm

Re: How to show Full-screen Vimeo and YouTube Videos

Post by Wanderlust »

Interesting solution, but you are lacking screencaps that would make this a lot easier to understand.

I opened the Toolbar option on the Tripane Skin, and several options. Which one of these is the one we add the script to? At first glance, none of them look correct.
Capture.JPG
You do not have the required permissions to view the files attached to this post.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: How to show Full-screen Vimeo and YouTube Videos

Post by NorthEast »

As mentioned in my post...
If you open your Tripane skin, go to the Toolbar tab, then click Edit on the right (to add custom javascript).
Clicking Edit will open a window where you can paste the script, which will be added to your skin.
Wanderlust
Jr. Propeller Head
Posts: 8
Joined: Wed Feb 10, 2016 12:17 pm

Re: How to show Full-screen Vimeo and YouTube Videos

Post by Wanderlust »

I appreciate the quick response, unfortunately I can still see someone getting confused as to which Toolbar element is the correct one to add this script to. (Maybe it doesnt matter, but when I went to try this on a new machine, I wasnt entirely sure what to do, so I am sure someone else will wonder too.)

To be clear, what Im asking for clarification on, is this: When you open the Toolbar panel, there are two panes, labeled A and B below. The pane marked B is showing the Toolbar buttons that are visible in this skin. Based on the way this panel is laid out, it appears that you can select a specific option in "B" and that each of these options can have unique scripts added to them. These options can appear in any order.

So my question is, which one of the options in B are you selecting before you hit the Edit button.
Capture.JPG
Maybe it doesnt matter, but the layout of the panel makes it appear that it might, so I think it's good for clarification.

Thanks!
You do not have the required permissions to view the files attached to this post.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: How to show Full-screen Vimeo and YouTube Videos

Post by NorthEast »

Wanderlust wrote:So my question is, which one of the options in B are you selecting before you hit the Edit button.
I didn't say to select anything in A or B, because you don't need to - the instructions are just to click Edit (C) on the right.

Why not just try it out and see if it works?

When you add a custom script to toolbar/skin, that script is run in your output with the tripane skin.
So although MadCap intended this feature to be used for scripts that you call from toolbar buttons, I found that you can actually just use this for any script that you want to run with the skin.
Wanderlust
Jr. Propeller Head
Posts: 8
Joined: Wed Feb 10, 2016 12:17 pm

Re: How to show Full-screen Vimeo and YouTube Videos

Post by Wanderlust »

ok, so by default, since the first items in the list are selected, you have to deselect them manually. THEN, you can click the Edit button and add the code snippet so that it isnt related to any of the existing toolbar items.

I tested the script though, and it does work! I think it's odd that the Flare help team wasnt aware of this, so I am going to pass it along.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: How to show Full-screen Vimeo and YouTube Videos

Post by NorthEast »

Wanderlust wrote:ok, so by default, since the first items in the list are selected, you have to deselect them manually. THEN, you can click the Edit button and add the code snippet so that it isnt related to any of the existing toolbar items.
No, you just have to click Edit.
You don't have to deselect or select anything - the script is not connected to what you have selected in the buttons.
Post Reply