Vimeo Widget in Muse set to auto play causes video to be black while audio plays

Contributor ,
Aug 15, 2017 Aug 15, 2017

Copy link to clipboard

Copied

thomas-mack.com/virtual-tours.html

http://thomas-mack.com/5655-badura.html

Above is an individual video page with the issue, but all pages that show when you select a property from the Virtual Tours page above have the same playback issue described below.

We have a Muse website using embedded Vimeo videos (added in using the default Vimeo widget). While using Chrome (80% of the time) the embedded Vimeo videos will auto start as programmed, but they will only show a black screen while the audio plays fine. If I click the pause and play button, the video then shows properly. Why is this doing that in our site? Safari seems to work properly, but Firefox shows similar issues about 50% of the time.

Any ideas? The widget and Muse are the latest version from Adobe. One more strange thing to note... when the issue occurs on load of the page, the audio will start playing without video, but the play button in the tool bar is still showing a play icon as if the video button has not been clicked or autostart has not begun. If I click the play button, the video starts back from the beginning properly with video and audio matched.

I have contacted Vimeo about this too, but I already know they are going to say it's a Widget issue since using the standard embed code works fine.  The main issue with the embed code is that it is not properly responsive and thus not usable in this site.

Views

1.5K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Aug 22, 2017 Aug 22, 2017
Hey,Many apologies for your frustration.However, I have logged a bus for this issue and now we can only get it achieved by some random workarounds.If converting the fixed width to fluid doesn't work for your site, we can try something else.I remember you said that an embed code of Vimeo works fine on your site.Here I would suggest you to right click and hide the widget from 1100px breakpoint, and place the embed code.As the break point the fixed width we don't even have to worry about the respon...

Likes

Translate

Translate
Aug 16, 2017 Aug 16, 2017

Copy link to clipboard

Copied

Hi Schiemer,

I am unable to reproduce this issue because it is playing as expected at my end in all the browsers including Firefox and Chrome.

As you said that this happens 50% of the time so possibly it's happening due to any network issue speed maybe.

I would request other community experts to please check the same at their respective ends and let me know if you see any issue.

Regards,

Ankush

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 16, 2017 Aug 16, 2017

Copy link to clipboard

Copied

Working fine here as well (Safari Mac, iPad, iPhone).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Aug 16, 2017 Aug 16, 2017

Copy link to clipboard

Copied

Here is an example video screen shot of the issue.  Sorry I didn't capture the mouse, but you will see that we are at the Virtual Tour page, I click the first video and the issue immediately shows.  Then the next 2 video play properly and the 4th video shows the error again.  The audio starts without the video and the play icon shows.  I can then click the play button and the video will start with the audio synced just fine. Not sure why this happens.

https://www.dropbox.com/s/cbb8v7r7ej5zla0/Vimeo-Playback-Issue.mov?dl=0

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Aug 16, 2017 Aug 16, 2017

Copy link to clipboard

Copied

Yes, I see that now, as per my observation this happens mainly if we pause the video and navigate or go back to a different and resume the same page where video was playing.

Very strange, can you please copy couple of Vimeo from this page and paste into a new one? See if t still behaves the same way.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Aug 16, 2017 Aug 16, 2017

Copy link to clipboard

Copied

I just wanted to make sure you guys know it is not my speed.  I work from home and I have a direct fiber connection to my home office.  Attached is my speed of 81mg down and 51 meg up. I still have the issue.  The above test is from Chrome and I have cleared my browser cache just before testing and making that video.

Screen Shot 2017-08-16 at 10.52.47 AM.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Aug 16, 2017 Aug 16, 2017

Copy link to clipboard

Copied

I'm sure I understand what you are asking for.  All the video pages that are linked from this main page are programmed the same way, just sometimes they work and sometimes they don't :

http://www.thomas-mack.com/virtual-tours.html

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Aug 16, 2017 Aug 16, 2017

Copy link to clipboard

Copied

I got this response from Vimeo about the same issue... see below.  Why would the Muse Vimeo widget be writing two copies of the embed code into the html?  I have checked my Muse file and there is only one copy of each video using the widget on each page.

Dana C. (Vimeo Support)

Aug 16, 7:01 PM EDT

Hi there,

Thanks for your patience!

This issue seems to be deriving from your webpage's source code. Embed widgets are built on our API, but they are ultimately managed by other software developers. I was not able to replicate this issue on our embed test page.

I did notice that there are two instances of the Vimeo player in your webpage's source code. I suspect that one of them is autoplaying in the background, which is pausing the one that is visible on your page (making it appear like one video without audio). You can see the duplicate iframes by searching for "//player.vimeo.com/video/180124015" in the attached HTML document. You can also access your webpage's code by right clicking in your browser and selecting "View Page Source." That should give you the HTML that your webpage is built on.

As a test, would it be possible to remove the video posted by your widget, and insert our iframe embed code?  To access the embed code, go to the video you want to embed and click the Share button. Then click the "+ Show options" link next to "Embed." Once you've made your changes, copy the new embed code and paste it into your Muse website. Please make sure only one instance of the video is embedded in your page.

Give that a try and let me know how it works out!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Aug 17, 2017 Aug 17, 2017

Copy link to clipboard

Copied

Hey Looks like we are heading into the right direction.

After few more testings, I found that this issue is only occurring in the largest breakpoints I mean which exceed 1000px after resizing the browser.

I also see that there isn't a need of breakpoints in this page.

Please try to remove the breakpoints from this page and see if it works for you.

Regards,

Ankush

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Aug 17, 2017 Aug 17, 2017

Copy link to clipboard

Copied

There are need for breakpoints on thee pages do to resizing the text on smaller screens.

Removing the breakpoints is not going to solve the issue if we are seeing it at the largest breakpoints though. This is obviously an issue with the Vimeo Widget and needs to be addressed.  What about the issue Vimeo brought up about the iframe code being duplicated in the html.  Why does the widget do this?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Aug 17, 2017 Aug 17, 2017

Copy link to clipboard

Copied

Please put a single Vimeo widget on your page and share it with me following these instructions - https://forums.adobe.com/docs/DOC-8652

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Aug 18, 2017 Aug 18, 2017

Copy link to clipboard

Copied

Here is the widget alone on a page.  I have tried this several times now and experienced the black screen while audio plays twice in Chrome:

http://thomas-mack.com/new/video-test-widget.html:

Here is the embed code alone on a page.  The issue with using the embed code though is it's difficult to get the auto start working and the responsiveness of the video is now gone:

http://thomas-mack.com/new/video-test-embed-code.html

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 18, 2017 Aug 18, 2017

Copy link to clipboard

Copied

… and where is the corresponding .muse file, as asked for in the document, linked by ankushr?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Aug 18, 2017 Aug 18, 2017

Copy link to clipboard

Copied

Here is a video screen capture of this test page, with only the Vimeo widget inside the page and it has the exact same issue over and over again.

https://www.dropbox.com/s/pe29yc82is7a7q1/Vimeo-Playback-Issue-2nd-Example.mov?dl=0

Also, here is the Muse file that created this site and the test pages are under the Virtual Tour page.  All the Tour pages are made exactly the same since I duplicate each one to make the next.  I just added 5 new video last night as well as a navigation system for the page to scroll the user to each Campus location easier.

Dropbox - TMDG - Responsive MUSE Website-8-16-17.muse

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Aug 18, 2017 Aug 18, 2017

Copy link to clipboard

Copied

Hey,

I have noticed a weird this that you have kept all the breakpoints of your as fluid except the largest 1200px Breakpoint.

Is there a particular reason intended to do that.

Looks like this is the root cause of two instances running, one for fixed with and another for fluid width.

I suggest you convert all the 1200px width breakpoints to fluid for child pages of "virtual tours" page and your issue might get resolved.

Let me know if it helps.

Regards,

Ankush

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Aug 22, 2017 Aug 22, 2017

Copy link to clipboard

Copied

This is NOT an option.  This site has Motion Effects (parallax style images in between each section as the page scrolls) for the desktop breakpoint. I followed the Muse recommendations on using fixed and fluid breakpoints together to still allow the motion effects for desktop computers. If I change the desktop (1200 break point) to fluid, I get the attached notification which we DO NOT want to loose.

Screen Shot 2017-08-22 at 10.49.26 AM.png

WHY would a widget that embeds a Vimeo video have issue with playback due to a breakpoint change from Fluid to Fixed?

I have found a widget from another provider that allows scroll effects in Fluid layouts, so I may try that, but this is just another disappointing widget from Adobe that is not completely thought through and tested for all uses.  Using a combination of Fixed and Fluid breakpoints in Muse is allowed and encouraged to allow scroll effects for computers, but then turn them off for phones.  SERIOUSLY DISAPPOINTING ADOBE!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Aug 22, 2017 Aug 22, 2017

Copy link to clipboard

Copied

Here is the video that shows this ability described right from Muse:

Scroll Effects with Responsive Design - YouTube

But then this ability messes with your video player widget... crazy.  Something you should probably fix, just like the ability to have scroll effects in Fluid breakpoints.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Aug 22, 2017 Aug 22, 2017

Copy link to clipboard

Copied

Hey,

Many apologies for your frustration.

However, I have logged a bus for this issue and now we can only get it achieved by some random workarounds.

If converting the fixed width to fluid doesn't work for your site, we can try something else.

I remember you said that an embed code of Vimeo works fine on your site.

Here I would suggest you to right click and hide the widget from 1100px breakpoint, and place the embed code.

As the break point the fixed width we don't even have to worry about the responsiveness as it won't work in there.

Please see if it works fine.

Regards,

Ankush

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Aug 22, 2017 Aug 22, 2017

Copy link to clipboard

Copied

Yes, I said an embedded code works fine for playback, but then the video size is not responsive.  So, the embed code by itself is useless as raw html since the video will not respond to the page size as the widget does.

I will try to hide the widget on this breakpoint, but then we are going to have 3 copies of the embed code on the html of the site.  Two that are made (why?) fro mthe widget and then one made through raw html.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 06, 2017 Nov 06, 2017

Copy link to clipboard

Copied

T&MD | LVDEC-6775 Edmond Suite 210-300

Does MUSE have any update to this???

I am still getting the same issue in the latest version of Muse 2018.  The page will load, audio for the video will start playing, but no video, just black screen.  Then, if I click play the video and audio will work properly.  Above is just one example.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 06, 2017 Nov 06, 2017

Copy link to clipboard

Copied

LATEST

Well, I guess Muse won't fix their widget for autoplay of videos.

This glitch is unacceptable since you never know when the video will actually play properly once the page loads.

I have has to turn off all my auto play just so my videos will start and play properly once the user requests it.  This really sucks and another reason I am moving my sites away from Muse.  This latest version or 2018 has caused me nothing but stress with broken widgets all over the place and third party widgets now broken too,.  Not to mention they still have yet to fix major issues like this one.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines