Fullscreen Vimeo Video not Working

[SmallDogCreative]

Happy Holidays Team SwiftIdeas!

Say, I’ve done considerable research on the issue of not being able to see/play fullscreen Vimeo videos. It turns out that Vimeo coded their player to not display the fullscreen button if the Vimeo Player attributes are not present (embed code is likely missing these three required fullscreen attributes: webkitallowfullscreen mozallowfullscreen allowfullscreen), as specified in this Vimeo thread: https://vimeo.com/forums/help/topic:277610

According to Vimeo, the parent iframe that wraps the Vimeo embed also needs these attributes for their Player, or any other content used to wrap the iframe around, to go fullscreen.

I searched your forums (http://www.swiftideas.com/forums/search/vimeo+embed/) and found a post for which you provided a snippet/function that appeared to append the sf_get_embed_src class however, this does not resolve the problem.

Can you please provide a snippet/update to insure that the required attributes are present in the iframe/wrapper for Vimeo videos so we can show them fullscreen?

Thanks!

[David Martin – Support]

Hi,

Can you add a WP login for me? Are you using the video asset from the Page Builder or just pasting in the iFrame code?

Thanks.

[SmallDogCreative]

This reply has been marked as private.

[David Martin – Support]

Hi,

There is another shortcode you can use:

[sf_fullscreenvideo type="image-button" btntext="Button Text" imageurl="http://yourvillage.staging.wpengine.com/wp-content/uploads/2015/11/Screen-Shot-2015-12-16-at-15.15.19.png" videourl="http://player.vimeo.com/video/133374862" extraclass="your-custom-class"]

Here is a test: http://yourvillage.staging.wpengine.com/?page_id=2067&preview=true.

Thanks.

[SmallDogCreative]

Right, so, that’s NOT what we are trying/need to do, but to verify, I removed the standard video object and replaced it with a text object with the shortcode provided – doesn’t work (which you can see here: http://yourvillage.staging.wpengine.com/class/1-2-3-magic/). I’ve attached two images. The first with the video in the page as specified, using the Swift Video object in which Vimeo does NOT see its required attributes, so sets the fullscreen button to display:none via its CDN-served CSS.

The second is the same page with the display:none unchecked in Chrome’s Web Developer and the fullscreen button clearly visible.

Now, it’s important to note that overriding the CDN CSS is not possible by pure CSS, but even if it were, the fullscreen will not work without the required attributes.

This requires recoding of the object container to include the attributes.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

This reply has been marked as private.

[SmallDogCreative]

This reply has been marked as private.

[David Martin – Support]

Hi,

Is that not caused by the video’s custom logo? Please inspect the output, has your client added a logo?

– Please create a test also with this: http://vimeo.com/98591307

Ref: https://vimeo.com/help/faq/sharing-videos/embedding-videos#can-i-use-my-own-logo-in-the-embedded-pro-player

Thanks.

[SmallDogCreative]

This reply has been marked as private.

[David Martin – Support]

No problem! Thanks.

[Hunter]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please paste this code at functions.php of child theme http://www.pastie.org/private/cyt0xmciyddzkho8m7lha.

Thanks
Mohammad

[Hunter]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please go to Admin > Appearance > Editor > Open functions.php file and paste the code just before ?> tag.
Thanks
Mohammad

[Hunter]

This reply has been marked as private.