Flare Complains about Code to Embed Video

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
fadibitz
Propeller Head
Posts: 26
Joined: Tue Jun 26, 2012 4:16 am

Flare Complains about Code to Embed Video

Post by fadibitz »

Hey again, folks. Today I'm testing multimedia in Flare 10.

Flare seems to have difficulty with the code used to embed (for example) a YouTube video. I used both the <iframe> and <object> methods of embedding media, but Flare complain about both with the same basic error:

'>' is an unexpected token. The expected token is '='. Line 20, position xx

Code: Select all

<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/3yPXBJo1qRA" frameborder="0" allowfullscreen></iframe>
I've cleaned up the formatting, but in this example, position xx refers to the '>' after 'allowfullscreen'. Apparently, Flare does not recognize that parameter. A similar error occurs when using the following code to embed the video:

Code: Select all

<object width="560" height="315">
    <param name="movie" value="//www.youtube-nocookie.com/v/3yPXBJo1qRA?version=3&hl=en_US"></param>
    <param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
    <embed src="//www.youtube-nocookie.com/v/3yPXBJo1qRA?version=3&hl=en_US" type="application/x-shockwave-flash" width="560" height="315"
        allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
Has anyone discovered the secret, or if no secret exists, a workaround?
Nita Beck
Senior Propellus Maximus
Posts: 3667
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: Flare Complains about Code to Embed Video

Post by Nita Beck »

I think it's not expecting to see > after allowfullscreen.
Nita
Image
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
Msquared
Propellus Maximus
Posts: 848
Joined: Mon Aug 06, 2012 10:19 am
Location: Southampton, UK

Re: Flare Complains about Code to Embed Video

Post by Msquared »

I'm no expert on embedding movies, so I'm just looking at the syntax of what you posted. So far as I can see, the ">" is valid, syntactically at least. But I do notice this.

A couple of lines earlier you have <param name="allowFullScreen" value="true"> and in the line that is giving you trouble, you have allowfullscreen="true".

I suspect the parameter definitions are case sensitive, so I think you may have a parameter "allowFullScreen" but are trying to ref to it as "allowfullscreen". That may cause the error you are seeing. SO you could try replacing "allowfullscreen" with allowFullScreen".
Marjorie

My goal in life is to be as good a person as my dogs already think I am.
fadibitz
Propeller Head
Posts: 26
Joined: Tue Jun 26, 2012 4:16 am

Re: Flare Complains about Code to Embed Video

Post by fadibitz »

A couple quick clarifications:

* The code is copied directly from the YouTube video (click the Share link below the video, and then click Embed).
* HTML is not case sensitive (unless something has changed recently), so allowFullScreen is functionally equivalent to allowfullscreen (however, most scripting languages are case sensitive); this appears to be a problem with Flare's validation process.
* The allowfullscreen parameter does not take a value, so it is not followed by "=".
Msquared
Propellus Maximus
Posts: 848
Joined: Mon Aug 06, 2012 10:19 am
Location: Southampton, UK

Re: Flare Complains about Code to Embed Video

Post by Msquared »

However, I know Flare has trouble with element and class names in the CSS Stylesheet when the cases don't match. I assumed that it was because CSS was case-sensitive (tht would be a bad design decision if ever there was one). But a quick Google before replying reveals that it isn't, but some XHTML implementations may treat it as though it is. So, given that Flare isn't happy, and the error message isn't apparantly relating to a genuine error,I'd try getting rid of the case difference just in case.

And looking a bit deeper before hitting submit, is the exact error posted from the first or second example? If the first, then although you say "allowfullscreen" doesn't expect a parameter, it seems to be asking for one. And, as Nita says, it doesn't expect ">" there. It expects "=" followed by the value. That may not be HTML, but that's what it's saying, so you could try giving it one.

In your second example, as it is coded, allowfullscreen does have a parameter - and it's specified twice in fact, once in a "param" element and once in the "embed" element. Are you getting exactly the same error in this case, or a slightly different error? And what line and character is flagged? In this example, you could try removing the "allowscriptaccess" and "allowfullscreen" from the "embed" statement completely since values for these two parameters are already specified above. Could that be the error here? Could Flare be saying here that it doesn't expect those parameters at all in the "embed" element?
Marjorie

My goal in life is to be as good a person as my dogs already think I am.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Flare Complains about Code to Embed Video

Post by NorthEast »

fadibitz wrote:* HTML is not case sensitive (unless something has changed recently), so allowFullScreen is functionally equivalent to allowfullscreen (however, most scripting languages are case sensitive); this appears to be a problem with Flare's validation process.
The YouTube code might be valid HTML, but not necessarily valid XHTML.

A quick check on Google suggests this is a known issue, and there are workarounds:
https://www.google.com/search?q=youtube+embed+xhtml
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Flare Complains about Code to Embed Video

Post by NorthEast »

Ok, I'm not arguing the toss, but a quick check on Google suggests there might be an issue with the YouTube code being invalid - for example, this article specifically mentions a problem with allowfullscreen.
http://www.gtpdesigns.com/design-blog/view/w3c-valid-xthml-and-html5-youtube-iframe-embeds

Update
The post I replied to seems to have disappeared, but a quick test shows that Flare will complain if 'allowfullscreen' is included (with 'new' YouTube embed code), but works fine when that is removed. Alternatively, if you use YouTube's 'Old embed code' option, that works - but you need to change the paths in the code from "//www.youtube.." to "http://www.youtube..."
fadibitz
Propeller Head
Posts: 26
Joined: Tue Jun 26, 2012 4:16 am

Re: Flare Complains about Code to Embed Video

Post by fadibitz »

Yeah, I deleted it because my hubris outstripped my good sense for a moment.

The key was in fact to do with the problem of XHTML validity; the tool you linked to worked wonderfully, but I did not use it until I had examined the syntax requirements of the elements under scrutiny.
mpaquette
Propeller Head
Posts: 12
Joined: Thu May 22, 2014 1:35 pm
Location: Montreal
Contact:

Re: Flare Complains about Code to Embed Video

Post by mpaquette »

fadibitz wrote: Flare seems to have difficulty with the code used to embed (for example) a YouTube video. I used both the <iframe> and <object> methods of embedding media, but Flare complain about both with the same basic error:

'>' is an unexpected token. The expected token is '='. Line 20, position xx

Code: Select all

<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/3yPXBJo1qRA" frameborder="0" allowfullscreen></iframe>
I've cleaned up the formatting, but in this example, position xx refers to the '>' after 'allowfullscreen'.
Short story:

As you've discovered the Flare XML editor only accepts well-formed XML. The following is well-formed and means the same as your error-inducing iframe:

Code: Select all

<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/3yPXBJo1qRA" frameborder="0" allowfullscreen=""></iframe>
Note that even this well-formed allowfullscreen="" won't let your users view the player at full screen in most browsers. We'll get to this in a bit.

Side story:

The allowfullscreen attribute is a boolean attribute. Its presence or absence specifies to the browser whether or not, respectively, to give the iframe access to the full screen.

The actual value you assign to this attribute is not important, and in fact, browsers ignore it. You have a couple of officially-condoned choices, but we've had consistent success with an empty string ("").

Incidentally, the deprecated attributes webkitallowfullscreen and mozallowfullscreen have been replaced by allowfullscreen. But you can add them to cover older browser territory:

Code: Select all

<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/3yPXBJo1qRA" frameborder="0" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen=""></iframe>
For details, see http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2, https://html.spec.whatwg.org/multipage/ ... attributes, and https://developer.mozilla.org/en/docs/W ... ent/iframe.

Long story:

If full screen access is important to you, then make sure that parent iframes also have the allowfullscreen attribute.

There are other requirements but they mostly depend on the browser user's preferences. You can't control that but you can at least make sure your HTML ducks are in order.

It turns out that an HTML5 target built from Flare (version 8 in our case, I haven't tried version 10) uses an iframe for topic content. Flare does not include the allowfullscreen attribute in this iframe, which prevents descendant iframes from gaining fullscreen access. In other words, the embedded YouTube player in your topic won't be able to play in full screen on most web browsers.

The following fix works for us with Flare 8 for HTML5 targets. In our Flare skin, in the Toolbar tab, we add this code to the Custom JavaScript field:

Code: Select all

// Specify that the iframe that contains the current topic may access
// the full screen. This way, iframes in a topic, such as video 
// players, may also access the full screen. This hack works 
// with Flare 8 HTML5 targets and uses jQuery.

$(document).ready(function() {
  $("#topic").attr({ "allowfullscreen": "", "webkitallowfullscreen": "", "mozallowfullscreen": ""});
});
For details, see https://html.spec.whatwg.org/multipage/ ... fullscreen.
Marc Paquette | Technical Writer
FlareLint is open source software to reduce production time and improve quality: https://flarelint.github.io/
Post Reply