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

How to show Full-screen Vimeo and YouTube Videos

Postby Wanderlust on Wed Aug 24, 2016 11:33 am

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.
Wanderlust
Jr. Propeller Head
 
Posts: 8
Joined: Wed Feb 10, 2016 12:17 pm

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

Postby Dave Lee on Tue Aug 30, 2016 12:31 am

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" );
});
Dave Lee
Master Propellus Maximus
 
Posts: 5033
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

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

Postby mpaquette on Fri Sep 16, 2016 10:25 am

I second David Lee's solution.

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

I hope this helps.

Marc.
Marc Paquette | Technical Writer - Intelerad Medical Systems Incorporated
FlareLint is open source software to reduce production time and improve quality: http://www.intelerad.com/flarelint
mpaquette
Propeller Head
 
Posts: 10
Joined: Thu May 22, 2014 1:35 pm
Location: Montreal

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

Postby Wanderlust on Tue Sep 27, 2016 4:10 pm

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.
Wanderlust
Jr. Propeller Head
 
Posts: 8
Joined: Wed Feb 10, 2016 12:17 pm

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

Postby Dave Lee on Tue Sep 27, 2016 11:54 pm

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.
Dave Lee
Master Propellus Maximus
 
Posts: 5033
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

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

Postby Wanderlust on Wed Sep 28, 2016 8:40 am

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.
Wanderlust
Jr. Propeller Head
 
Posts: 8
Joined: Wed Feb 10, 2016 12:17 pm

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

Postby Dave Lee on Wed Sep 28, 2016 11:54 pm

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.
Dave Lee
Master Propellus Maximus
 
Posts: 5033
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

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

Postby Wanderlust on Fri Sep 30, 2016 6:34 am

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.
Wanderlust
Jr. Propeller Head
 
Posts: 8
Joined: Wed Feb 10, 2016 12:17 pm

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

Postby Dave Lee on Fri Sep 30, 2016 6:56 am

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.
Dave Lee
Master Propellus Maximus
 
Posts: 5033
Joined: Mon Mar 05, 2007 8:33 am
Location: UK


Return to Web-based Outputs

Who is online

Users browsing this forum: No registered users and 5 guests