Fullscreen No Longer Works - Embedded Videos

[anna]

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

[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.

[anna]

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.

[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

[anna]

Favicon covers fullscreen button FF Mac

[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

[and]

Hey Mike, how did this go?

[mike]

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).

[and]

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

[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>

[and]

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>

[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.

[and]

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.

[and]

Mike, have you been able to check this?

[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

[mike]

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

[and]

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

[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.

[anna]

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>.