Modify

Ticket #776 (closed task: fixed)

Opened 21 months ago

Last modified 18 months ago

Fullscreen No Longer Works - Embedded Videos

Reported by: anna Owned by:
Priority: blocker Milestone: 4.5 EM and Plumi UI Re-Design
Component: EmbeddedPlayback Severity: Ready for Testing
Keywords: Cc:
Who will test this: And

Description

Try clicking fullscreen on any video on this page:  http://manifesto.sagaponic.net/

Attachments

embed-fullscreen-safari.jpg Download (112.2 KB) - added by anna 20 months ago.
embed-ff.jpg Download (81.6 KB) - added by anna 20 months ago.
Favicon covers fullscreen button FF Mac

Change History

comment:1 Changed 21 months ago by anna

FYI fullscreen works very nicely from the front page and video view page of EM.org on Firefox.

On Safari there are issues with fullscreen playback directly from EM.org also. E.g. the subtitle menu appears over the video on the video/view page, and the video only appears in a small window in the top left-hand corner from the front page.

comment:2 Changed 21 months ago by anna

  • Milestone changed from 4.4 Final to 4.5 EM & Plumi UI Re-Design

This issue we looked into yesterday and today. There was apparently a solution devised earlier to hide the fullscreen button on embedded videos. However this does not work perfectly, as the button reappears after user-interaction, due to mediaelement.js javascript changing this back again. Also its not a real solution either.

However it will take some time to investigate and find a solution, so will move to 4.5 to see if we can address this in the re-design. If not it will have to wait for a subsequent release.

Changed 20 months ago by anna

comment:3 Changed 20 months ago by anna

Embedded video will not go fullscreen on Safari 6.0 as we discovered during sprint. Was going to take a while to troubleshoot.

Screenshot after clicking fullscreen button here  https://plumi.org/attachment/ticket/776/embed-fullscreen-safari.jpg

Changed 20 months ago by anna

Favicon covers fullscreen button FF Mac

comment:4 Changed 20 months ago by anna

On Firefox 14.0.1 (Mac) the favicon covers the fullscreen button. See attached screenshot.

 https://plumi.org/attachment/ticket/776/embed-ff.jpg

comment:5 Changed 19 months ago by and

Hey Mike, how did this go?

comment:6 Changed 19 months ago by mike

  • Status changed from new to closed
  • Resolution set to ready for testing

fullscreen issue fixed on em.org. Are the icons still overlapping on Firefox? It doesn't happen for me (FF 15 on Windows and Linux).

comment:7 Changed 19 months ago by and

  • Status changed from closed to reopened
  • Resolution ready for testing deleted

Hey Mike, i'm still getting the same issue on safari, chrome, opera, and ff-15 testing the new embed code. eg.  http://v4c.org/content/another-embed-test

comment:8 Changed 19 months ago by mike

Hi And, The embed in that page has the old code. You need to create an embed copying the code that we have now on em.org. Like this one

<iframe src=' https://www.engagemedia.org/Members/IDEPfoundation/videos/air-sumber-kehidupan-water-the-source-of-life/embed_view' frameborder='0' width='630' height='470' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

comment:9 Changed 19 months ago by and

  • Priority changed from critical to blocker

Hey Mike, i did another one and get the same issues  http://v4c.org/content/test-again

using this code

<iframe src=' https://www.engagemedia.org/Members/IDEPfoundation/videos/air-sumber-kehidupan-water-the-source-of- life/embed_view' frameborder='0' width='630' height='470' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

comment:10 Changed 19 months ago by mike

Hi And, the code on your new test is still the old code. If you look at the source code around the video, the iframe code is:

<iframe src=" https://www.engagemedia.org/Members/IDEPfoundation/videos/air-sumber-kehidupan-water-the-source-of-life/embed_view" frameborder="0" width="630" height="470"></iframe>

and not:

<iframe src='  https://www.engagemedia.org/Members/IDEPfoundation/videos/air-sumber-kehidupan-water-the-source-of- life/embed_view' frameborder='0' width='630' height='470' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

can you give send me an account for that site? Maybe the editor is blocking those tags?

You can also try creating an empty document in your machine, paste in the above code, name it test.html and open it in your browser.

comment:11 Changed 19 months ago by and

  • Severity set to Ready for Testing

Strange as I very much checked that it was the new code. Hence trying twice.

I've made you a account on the site to have a look.

comment:12 Changed 18 months ago by and

Mike, have you been able to check this?

comment:13 Changed 18 months ago by mike

Hi Anna, I never got any credentials for my account in v4c. Can you send the to me via e-mail? In any case, the iframe code on the v4c site is definetely the old one. Maybe the editor there does not like the extra tags or sth.

You can see a test with the new code here, in which fullscreen is working:

 http://ftelia.net/embed.html

comment:14 Changed 18 months ago by mike

As I thought, the problem is with the v4c editor. It chops off youtube's allowfullscreen parameter also.

comment:15 Changed 18 months ago by and

That's a bit of an issue given how popular drupal is. Is your test just html? have you tried it on wordpress?

comment:16 Changed 18 months ago by mike

Yes my test is just html. The problem is that the only way to allow an iframe size (and not a flash object that youtube uses) to go fdullscreen is to declare it in the iframe code. This is for a very good reason. iframes can show content to your website that is not controlled by you (ads). And you wouldn;t want someone arbitary deciding to go over the iframe size without you allowing it.

The problem is that the allowfullscreen webkitAllowFullScreen mozallowfullscreen paramters are new and still the browser devs have not agreed on one common parameter (as shown by the need to use all three of them if you want it to play on safari/chrome, mozilla and IE)

Unfortuanttely most editors don't like parameters without values as they were not common before. Not sure what else we can do here though to fix this problem. People that have control over their websites, can specifically allow these tags.

Let's see how the flash fallback faires, but even if the fallback works on iframes, we'll be cutting of html5 on embeds and show flash videos. Not a very good solution IMHO.

comment:17 Changed 18 months ago by anna

  • Status changed from reopened to closed
  • Resolution set to fixed

Tested YT, Vimeo and EM.org embeds here on Wordpress.  http://manifesto.sagaponic.net/?p=76

All three work fullscreen :)

(whereas my last test on August 4th did not -  http://manifesto.sagaponic.net/?p=67)

I suppose at this point we just tick this off - and hope that things improve in the future regarding some CMSs/blogs etc. stripping parameters out of <iframes>.

View

Add a comment

Modify Ticket

Action
as closed
The resolution will be deleted. Next status will be 'reopened'
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.