Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #31001 > unrolled thread

Allow full screen

Back to article view | Back to comp.lang.javascript

Contents

  Allow full screen Andrew Poulos <ap_prog@hotmail.com> - 2016-08-01 15:26 +1000
    Re: Allow full screen Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-08-01 11:23 +0200
      Re: Allow full screen Andrew Poulos <ap_prog@hotmail.com> - 2016-08-02 10:58 +1000
      Re: Allow full screen Andrew Poulos <ap_prog@hotmail.com> - 2016-08-02 13:28 +1000

#31001 — Allow full screen

I'm creating an elearning course which displays a YouTube video. When I 
preview the course in my browser the video's full screen button is enable.

If I load the course into a learning management system (LMS) the full 
screen button is disabled. Dr Google tells me that's because the IFRAME 
which contains the video or a parent frame does not have the attribute 
allowfullscreen.

When I look at the source the LMS creates when it displays the course I 
can see that the video is within an IFRAME, which is within a HTML 
document, within a FRAME, within a FRAMESET, within another FRAME, 
within a another FRAMESET.

I cannot directly edit the source that the LMS creates. I have added the 
allowfullscreen attribute to the IFRAME that contains the video and I tried

var frm = window.frameElement;
while (frm) {
    frm.setAttribute("allowfullscreen","");
    frm = frm.frameElement;
}

but it appears that a FRAMESET returns null.

My question is how do I move "up the tree" though any nested FRAMESET to 
add the attribute to all parent FRAMES and, if I do, will the attribute 
actually be "noticed" by the video (seeing its been added after the page 
has been rendered)?

Andrew Poulos

[toc] | [next] | [standalone]

#31003

Andrew Poulos wrote:

> I'm creating an elearning course which displays a YouTube video. When I
> preview the course in my browser the video's full screen button is enable.
> 
> If I load the course into a learning management system (LMS) the full
> screen button is disabled. Dr Google tells me that's because the IFRAME
> which contains the video or a parent frame does not have the attribute
> allowfullscreen.
> 
> When I look at the source the LMS creates when it displays the course I
> can see that the video is within an IFRAME, which is within a HTML
> document, within a FRAME, within a FRAMESET, within another FRAME,
> within a another FRAMESET.
> 
> I cannot directly edit the source that the LMS creates. I have added the
> allowfullscreen attribute to the IFRAME that contains the video and I
> tried
> 
> var frm = window.frameElement;
> while (frm) {
>     frm.setAttribute("allowfullscreen","");
>     frm = frm.frameElement;
> }
> 
> but it appears that a FRAMESET returns null.

Not “null”, but “undefined”.  That appears to work as designed:

,-<https://developer.mozilla.org/de/docs/Web/API/Window/frameElement>
| 
| Returns the element (such as <iframe> or <object>) in which the window is 
| embedded, or null if the element is either top-level or is embedded into a 
| document with a different script origin; that is, in cross-origin 
| situations.

A “frameset” element is not an element in which a window is *directly* 
embedded; that would, at most, be the frameset’s child “frame” element.
 
> My question is how do I move "up the tree" though any nested FRAMESET to
> add the attribute to all parent FRAMES and,

As described in the FAQ^W^W^W^W^WAmazingly, it is _not_ described in the FAQ 
or FAQ Notes although it is a feature of DOM Level 0.  (Anyone up for 
writing that part?)

See <https://developer.mozilla.org/en-US/docs/Web/API/Window/parent>

However, the “allowfullscreen” attribute appears to be defined (and make 
sense) for “iframe” and “object” elements only.

> if I do, will the attribute actually be "noticed" by the video (seeing its
> been added after the page has been rendered)?

Try and see.  According to my tests, no.

However, SOP or CORS permitting, you can remove the "descendant" “iframe” 
element (that already has that attribute), add the attribute to the 
"ancestor" iframe element while the "descendant" “iframe” element is not in 
the document, and restore the latter to its original place.

Or, probably better, clone the "descendant" “iframe” element object 
recursively, add the attribute to the "ancestor", and replace the original 
"descendant" element with the clone (WFM).  (Of course, you have to work 
your way from bottom to top and then back to bottom, and you might need to 
save the document state, if you have an “iframe” in an “iframe” in an 
“iframe”.)

[Chrome DevTools rock (even in Chromium 51).  You can now create a “frame” 
or “iframe” element with empty “src” (defaults to "about:blank" on the fly 
*and* edit the embedded document, with the F2 key in the “Elements” tab.]

It would be better to fix the LMS.  Since I presume you are still using 
Moodle, it should be easy to fix; you should at least report this as a bug.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#31006

On 1/08/2016 7:23 PM, Thomas 'PointedEars' Lahn wrote:
> Andrew Poulos wrote:
>
>> I'm creating an elearning course which displays a YouTube video. When I
>> preview the course in my browser the video's full screen button is enable.
>>
>> If I load the course into a learning management system (LMS) the full
>> screen button is disabled. Dr Google tells me that's because the IFRAME
>> which contains the video or a parent frame does not have the attribute
>> allowfullscreen.
>>
>> When I look at the source the LMS creates when it displays the course I
>> can see that the video is within an IFRAME, which is within a HTML
>> document, within a FRAME, within a FRAMESET, within another FRAME,
>> within a another FRAMESET.
>>
>> I cannot directly edit the source that the LMS creates. I have added the
>> allowfullscreen attribute to the IFRAME that contains the video and I
>> tried
>>
>> var frm = window.frameElement;
>> while (frm) {
>>     frm.setAttribute("allowfullscreen","");
>>     frm = frm.frameElement;
>> }
>>
>> but it appears that a FRAMESET returns null.
>
> Not “null”, but “undefined”.  That appears to work as designed:
>
> ,-<https://developer.mozilla.org/de/docs/Web/API/Window/frameElement>
> |
> | Returns the element (such as <iframe> or <object>) in which the window is
> | embedded, or null if the element is either top-level or is embedded into a
> | document with a different script origin; that is, in cross-origin
> | situations.
>
> A “frameset” element is not an element in which a window is *directly*
> embedded; that would, at most, be the frameset’s child “frame” element.
>
>> My question is how do I move "up the tree" though any nested FRAMESET to
>> add the attribute to all parent FRAMES and,
>
> As described in the FAQ^W^W^W^W^WAmazingly, it is _not_ described in the FAQ
> or FAQ Notes although it is a feature of DOM Level 0.  (Anyone up for
> writing that part?)
>
> See <https://developer.mozilla.org/en-US/docs/Web/API/Window/parent>
>
> However, the “allowfullscreen” attribute appears to be defined (and make
> sense) for “iframe” and “object” elements only.
>
>> if I do, will the attribute actually be "noticed" by the video (seeing its
>> been added after the page has been rendered)?
>
> Try and see.  According to my tests, no.
>
> However, SOP or CORS permitting, you can remove the "descendant" “iframe”
> element (that already has that attribute), add the attribute to the
> "ancestor" iframe element while the "descendant" “iframe” element is not in
> the document, and restore the latter to its original place.
>
> Or, probably better, clone the "descendant" “iframe” element object
> recursively, add the attribute to the "ancestor", and replace the original
> "descendant" element with the clone (WFM).  (Of course, you have to work
> your way from bottom to top and then back to bottom, and you might need to
> save the document state, if you have an “iframe” in an “iframe” in an
> “iframe”.)

Thank you for the considered reply. It has given me, if not the 
solution, a way to find the solution.

> [Chrome DevTools rock (even in Chromium 51).  You can now create a “frame”
> or “iframe” element with empty “src” (defaults to "about:blank" on the fly
> *and* edit the embedded document, with the F2 key in the “Elements” tab.]
>
> It would be better to fix the LMS.  Since I presume you are still using
> Moodle, it should be easy to fix; you should at least report this as a bug.

I cannot edit the LMS output but I have now reported it as a bug.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#31007

On 1/08/2016 7:23 PM, Thomas 'PointedEars' Lahn wrote:
> Andrew Poulos wrote:
>
>> I'm creating an elearning course which displays a YouTube video. When I
>> preview the course in my browser the video's full screen button is enable.
>>
>> If I load the course into a learning management system (LMS) the full
>> screen button is disabled. Dr Google tells me that's because the IFRAME
>> which contains the video or a parent frame does not have the attribute
>> allowfullscreen.
>>
>> When I look at the source the LMS creates when it displays the course I
>> can see that the video is within an IFRAME, which is within a HTML
>> document, within a FRAME, within a FRAMESET, within another FRAME,
>> within a another FRAMESET.
>>
>> I cannot directly edit the source that the LMS creates. I have added the
>> allowfullscreen attribute to the IFRAME that contains the video and I
>> tried
>>
>> var frm = window.frameElement;
>> while (frm) {
>>     frm.setAttribute("allowfullscreen","");
>>     frm = frm.frameElement;
>> }
>>
>> but it appears that a FRAMESET returns null.
>
> Not “null”, but “undefined”.  That appears to work as designed:
>
> ,-<https://developer.mozilla.org/de/docs/Web/API/Window/frameElement>
> |
> | Returns the element (such as <iframe> or <object>) in which the window is
> | embedded, or null if the element is either top-level or is embedded into a
> | document with a different script origin; that is, in cross-origin
> | situations.
>
> A “frameset” element is not an element in which a window is *directly*
> embedded; that would, at most, be the frameset’s child “frame” element.
>
>> My question is how do I move "up the tree" though any nested FRAMESET to
>> add the attribute to all parent FRAMES and,
>
> As described in the FAQ^W^W^W^W^WAmazingly, it is _not_ described in the FAQ
> or FAQ Notes although it is a feature of DOM Level 0.  (Anyone up for
> writing that part?)
>
> See <https://developer.mozilla.org/en-US/docs/Web/API/Window/parent>
>
> However, the “allowfullscreen” attribute appears to be defined (and make
> sense) for “iframe” and “object” elements only.

I built a page with nested framesets with the "allowfullscreen" 
attribute on every frameset, frame, iframe and every parent element 
between the video and window.top yet still the video wouldn't enable the 
full screen button.

Perhaps frames were made obsolete in HTML5 for a reason?

What surprises me a little is that given how much video is used in 
elearning people having been screaming about this missing feature.

Andrew Poulos

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web