Essential Grid Chrome Vimeo playback issue

[Matt_t]

Thank you in advance for any help you can give.
The portfolio part of my page is broken in chrome, I am linking to Vimeo videos using the essential grid plug-in.

Demo: Home

I am running the most recent versions of ‘X’, chrome, and essential grid.

I am using Essential Grid(included with X) to layout all 6 Vimeo videos, it was working fine when I set it all up in April. But now, a few months later, when you click on the videos they load the video playback page for a split second and then go back to the original thumbnail.

I have found a couple of mentions from March '19 of this being an autoplay bug in chrome, so I tried in IE and everything works as originally designed.

I also found some JS posted on this forum, copied below. I placed it in the theme options: JS section and no joy.

jQuery(".esg-entry-media-wrapper iframe").attr(“allow”, “autoplay”);

I am a novice WP/X Theme developer, so if you could use small words I’d appriciate it.

Thanks
Matt

[lely]

Hi Matt,

The root cause of the issue is this: Cross-Origin Read Blocking (CORB) blocked cross-origin response

After some research, I found it is known conflict between vimeo and chrome. Please check this github report. Please try to check in with Vimeo for more updates on the issue.

Hope this helps.

[Matt_t]

Thanks for your reply.
I had to remove essential grid from my site due to some business presentations.
Please refer to new.mixturefilms.com for this bug.

I have no idea what CORB is, while the github report was an interesting read. I am not sure what I was supposed to learn from it or use it to correct the issue.

It seems if vimeo is the problem than any embedded video using vimeo wouldn’t work on chrome.
For example my other site www.matthewtalesfore.com/work/ which has many of the same embedded vimeo videos that all play great on chrome, but using a different plugin ‘Simple Grid’.

I reach out to vimeo, for an update as you suggested. However logic would dictate that the issue is with the EssentialGrid plugin and chrome.

[benursal]

Hi Matt,

That logic makes sense. This is actually an interesting issue. Let’s try to find a solution to this. Have you tried using The Grid instead of Essential Grid? That’s a quick solution I have at the top of my head.

Because if what you want to achieve in Essential Grid is achievable in The Grid (which is also bundled in our theme) and it works fine (unlike in EG), then it would make sense to go that route.

But if that is not an option, it would help if you can share with us your site’s login details in a Secure Note so we can check out its settings and hopefully suggest a solution. I’m bringing that up because, in my local computer, I use EG where I call on Vimeo videos.

But my settings don’t look the same as yours. So probably, we can figure out a solution that would work for you within Essential Grid itself (we could probably use a different skin, etc).

Looking forward to hearing from you. Take care.

Ben

[Matt_t]

Hi Ben
Thank you for your response, secure note sent.

I messed around with The Grid plugin, but I kept running in to “you have not connected your vimeo account” error. Weird thing was I enter my vimeo username in the appropriate field to no avail. I have left the plugin installed but deactivated. The Grid does have potential being able to play vimeo albums, not sure that can be done with EG, which would make management easier for me.

I did get in touch with vimeo support and they confirmed what Lely identified, but still not exactly sure how I can get EG to insert the missing allow=“autoplay” when all it asks for is the video ID. I will copy vimeo’s response below.

Thanks for all your help!

From Vimeo:
Thanks for providing that. So it looks like that plugin is using the autoplay feature that we provide. However, they are not using the necessary allow=“autoplay” attribute in the embed code. This is what is blocking your video from playing.

Notice here, this is the embed code live on your site right now:
<iframe class="esg-vimeo-frame readytoplay haslistener esg-vimeovideo" style="position: absolute; top: 0px; left: 0px; display: none; height: 100%; width: 100%; opacity: 0; visibility: hidden;" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" width="1024" height="576" data-src="https://player.vimeo.com/video/317100303?title=0&byline=0&html5=1&portrait=0&playsinline=1" src="https://player.vimeo.com/video/317100303?title=0&byline=0&html5=1&portrait=0&playsinline=1&player_id=vimeoiframe47712" id="vimeoiframe47712" data-ready="true"></iframe>​

allow=“autoplay” needs to be added to this embed code for your videos to work.

Sincerely,
Chuck B.

[christian]

Hey Chuck,

I’ve temporarily got around this by setting a timeout to the code you’ve posted previously. It didn’t work because the iframe code of EG was loaded after. Here’s the code I’ve added in Theme Options > JS.

setTimeout(function() {
  jQuery(".esg-entry-media-wrapper iframe").attr("allow", "autoplay;");
}, 3000);

I’ve posted this to our internal issue tracker so the person responsible for reaching out to the third-party bundled plugin developers could report this issue to them.

Hope that helps.

[Matt_t]

Thank you very much, that worked.

However the UX is a not quite the same.
Hopefully the developer address the underlying issue soon.

Thanks again.

[friech]

We’ve added this to our issue tracker so it can be considered for future development.

Cheers!