Fullscreen button is missing in embedded Vimeo video

Bug #1534081 reported by Lenka on 2016-01-14
14
This bug affects 3 people
Affects Status Importance Assigned to Milestone
Mahara
High
Unassigned
1.10
High
Unassigned
15.04
High
Unassigned
15.10
High
Unassigned

Bug Description

I've found a lengthy discussion concerning the disappearance of the fullscreen button on Vimeo forums, where many people are complaining that is stopped working recently on various platforms: https://vimeo.com/forums/help/topic:277610

https://vimeo.com/forums/help/topic:277610#comment_13981805
So here is a response from Vimeo from another forum.
1. In the past, fallback options in the browser allowed some version of fullscreen to operate even when within frames.
2. Within the last few weeks, updates to major browsers removed these fallback options. This caused the fullscreen button to fail when clicked. Vimeo videos would no longer enter fullscreen if they were placed within frames.
3. Because the button wouldn’t work anyway, in the last few days our developers have now removed the fullscreen button from any players that are embedded within frames. To confirm, the button would have been broken even if displayed. So, whether the button was there or not, your viewers would not be able to enter fullscreen.

The recommendation from Vimeo support is the following: https://vimeo.com/forums/help/topic:277610
If your embedded video is missing the fullscreen button in the Player, your embed code is likely missing these three required fullscreen attributes: webkitallowfullscreen mozallowfullscreen allowfullscreen
Our embed code includes these attributes by default, but if you have modified the embed code, or used another service to generate the embed code, it's possible these attributes are missing. An example of how the Vimeo embed code should appear is shown in the code block below.
NOTE: If the Vimeo iframe embed code is placed within another iframe, that parent iframe must also include the same fullscreen attributes.
Once these fullscreen attributes are included, the Player will display the fullscreen button again.
<iframe src= "https://player.vimeo.com/video/137003356" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

The recommended code is exactly what we are using, but fullscreen does not work in Mahara, while it works in Moodle (in the same browsers). Mahara seems to be stripping the necessary attributes webkitallowfullscreen mozallowfullscreen allowfullscreen on page view, while they are in the embed code when I confugure the External media block.

You can see an example in Mahara here https://mahara.org/user/lenkak/page-1 -- no fullscreen button
Fullscreen working in Moodle here https://lenka.moodlecloud.com/ (you need to log in as guest)

In this example video the lack of the fullscreen button is not such a problem, because there is a link to Vimeo where you can watch the video in fullscreen, but our clients are using private videos restricted to the Mahara domain, so that can be played only when embedded in Mahara, not on Vimeo.

I have tested Mahara 1.10.8, 15.10.2testing and mahara.org -- same problem.

Aaron Wells (u-aaronw) wrote :

This issue affects YouTube videos as well. They still display the "fullscreen" icon, but clicking on it doesn't go to full screen. Instead it displays a message: "Full screen is not available. Find out more" with a link to this page: https://support.google.com/youtube/answer/6276924

Aaron Wells (u-aaronw) wrote :

"High" importance because of the visible error message from YouTube.

It'll be easy to fix this for new iframes. But I don't know whether it will be feasible to fix it for existing iframes. :(

Reviewed: https://reviews.mahara.org/5909
Committed: https://git.mahara.org/mahara/mahara/commit/1ef7fb4f3da78d2829cc136f3fb656267c742515
Submitter: Aaron Wells (<email address hidden>)
Branch: master

commit 1ef7fb4f3da78d2829cc136f3fb656267c742515
Author: Dale Smith <email address hidden>
Date: Wed Jan 13 19:31:30 2016 +0000

Adding 'allowfullscreen' to iframe elements in htmlpurifier

Bug 1534081

* This alters the default allowed attributes for iframe and adds:
- allowfullscreen
- mozallowfullscreen
- webkitallowfullscreen
All are allowed 0, 1 or empty values.
* This resolves issues with vimeo and youtube, who require these attributes before
showing the fullscreen icon: https://developer.vimeo.com/player/embedding

behatnotneeded: Can't test Flash with behat

Change-Id: Ie57c3c3968c4f7cd58a544135351ef506aa6be11

Mahara Bot (dev-mahara) wrote :

Patch for "15.04_STABLE" branch: https://reviews.mahara.org/6045

Mahara Bot (dev-mahara) wrote :

Patch for "1.10_STABLE" branch: https://reviews.mahara.org/6046

Reviewed: https://reviews.mahara.org/6046
Committed: https://git.mahara.org/mahara/mahara/commit/c742ead0637bc20636adcb6405892314ab953614
Submitter: Aaron Wells (<email address hidden>)
Branch: 1.10_STABLE

commit c742ead0637bc20636adcb6405892314ab953614
Author: Dale Smith <email address hidden>
Date: Wed Jan 13 19:31:30 2016 +0000

Adding 'allowfullscreen' to iframe elements in htmlpurifier

Bug 1534081

* This alters the default allowed attributes for iframe and adds:
- allowfullscreen
- mozallowfullscreen
- webkitallowfullscreen
All are allowed 0, 1 or empty values.
* This resolves issues with vimeo and youtube, who require these attributes before
showing the fullscreen icon: https://developer.vimeo.com/player/embedding

behatnotneeded: Can't test Flash with behat

Change-Id: Ie57c3c3968c4f7cd58a544135351ef506aa6be11

Mahara Bot (dev-mahara) wrote :

Reviewed: https://reviews.mahara.org/6044
Committed: https://git.mahara.org/mahara/mahara/commit/2bf0746df25df2514d2e995e3f6b7629251ea0bf
Submitter: Robert Lyon (<email address hidden>)
Branch: 15.10_STABLE

commit 2bf0746df25df2514d2e995e3f6b7629251ea0bf
Author: Dale Smith <email address hidden>
Date: Wed Jan 13 19:31:30 2016 +0000

Adding 'allowfullscreen' to iframe elements in htmlpurifier

Bug 1534081

* This alters the default allowed attributes for iframe and adds:
- allowfullscreen
- mozallowfullscreen
- webkitallowfullscreen
All are allowed 0, 1 or empty values.
* This resolves issues with vimeo and youtube, who require these attributes before
showing the fullscreen icon: https://developer.vimeo.com/player/embedding

behatnotneeded: Can't test Flash with behat

Change-Id: Ie57c3c3968c4f7cd58a544135351ef506aa6be11

Mahara Bot (dev-mahara) wrote :

Reviewed: https://reviews.mahara.org/6045
Committed: https://git.mahara.org/mahara/mahara/commit/49c5ffc0101c6926becee81e3267e71a6aad515c
Submitter: Robert Lyon (<email address hidden>)
Branch: 15.04_STABLE

commit 49c5ffc0101c6926becee81e3267e71a6aad515c
Author: Dale Smith <email address hidden>
Date: Wed Jan 13 19:31:30 2016 +0000

Adding 'allowfullscreen' to iframe elements in htmlpurifier

Bug 1534081

* This alters the default allowed attributes for iframe and adds:
- allowfullscreen
- mozallowfullscreen
- webkitallowfullscreen
All are allowed 0, 1 or empty values.
* This resolves issues with vimeo and youtube, who require these attributes before
showing the fullscreen icon: https://developer.vimeo.com/player/embedding

behatnotneeded: Can't test Flash with behat

Change-Id: Ie57c3c3968c4f7cd58a544135351ef506aa6be11

Changed in mahara:
status: Fix Committed → Fix Released
no longer affects: mahara/16.04
To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Duplicates of this bug

Other bug subscribers