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.