Can I view code within Muse to diagnose why my Vimeo thumbnails aren't loading?

Report · May 14, 2018

Hi,

I'm building a site in which there is a gallery that contains links to several Vimeo videos. Each thumbnail is contained within a lightbox widget, which causes the video to pop-up fullscreen when clicked. Videos from the same client are nested inside one thumbnail using a Composition Lightbox widget, so that when you click the main thumbnail, it pops-up a Video along with smaller thumbnails to other videos within that project.

My issue is that, almost without fail, the top video within these nested galleries fails to load, showing a blank spot. However, if I refresh the page, then make that thumbnail the first one I click, it will load properly, but only if it is the first one clicked.

Here is what is looks like when it doesn't load:

Is there a way I can look at the code for this part of the site to help figure out why it's not functioning properly? And if so, what should I look for?

Here is a link to the test site: http://testsite.clovehitchproductions.com/work.html

To reproduce the error, try clicking on the "Center for Nonprofit Excellence", "Event Promos" or "3D Renderings" thumbnails, but only after first clicking another video.

This is literally the only issue that is holding me back from finishing up my other breakpoints and completing the site, so any advice or suggestions would be greatly appreciated because I am at a complete loss of what to do next.

Thank you!

Report · May 16, 2018

Hey zythe84,

Please take a look at this thread - Vimeo Widget in Muse set to auto play causes video to be black while audio plays

A similar issue has been discussed and i hope it will give you also some idea to solve the problem.

Regards,

Ankush

Report · May 16, 2018

Hi Ankush,

Thanks for linking the other article, but I'm not sure it is the same issue. I can't view any of their old links, so I can't see exactly what their problem was, but it seems that their issue was with the Autoplay.

My thumbnails aren't set to Autoplay, but just to load in the frame.

Were you able to reproduce my error when visiting the test site?

Thank you so much for your help. I hope we can get this issue resolved.

Cheers,

JohnBen

Report · May 16, 2018

Open the problem page in your browser. Right-click and select View Source or Inspect Element (F12).

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · May 16, 2018

Thanks Nancy! Is there a way I can figure out where to navigate to the code that relates to that specific thumbnail opening?

Report · May 17, 2018

the site | vids load for me on FF... I assume your host or browser is just overloaded but the code itself works

p.s, no... Muse is designed to work from a .muse file and that is the best way to look for code errors

Report · May 17, 2018

Hi Ussnorway,

Thanks for testing it out. Did the top one load? For whatever reason, it only seems to affect the top one, which is the one that loads first when you click the thumbnail from the main page. The error doesn't occur if the link is the first one clicked. So if you load the page, click on any other thumbnail, close that Lightbox, then click on the Center for Nonprofit link, I wonder if the error will appear.

I'm going to contact my host and see if there could also be an issue there.

Thanks for helping,

zythe84

Report · May 17, 2018

yes I tested that and it looks like you made a code change now so here is a new test

lightbox does not close unless you give user a close box option... it does shut if they find a way to click | swip outside the widget but that is not the same thing
also note that the lightbox widget has a focus... look at the vid, see that I shut on the 3rd option and when I reopen the lightbox that option 3 remains

imo you have this site overloaded with too many vids all loading and the design would be better with a basic iframe link... this is what I would try next next as the vids only load when clicked on and that should slove it

Report · May 22, 2018

Thanks Ussnorway!

So instead of using the Vimeo widget within my Lightbox and Composition Lightbox, I would instead place the embedded HTML containing the iframe link? I tried this with the top one, and when I tested it, it was still having the same issue.

Also, when you mention that the Lightbox has a focus, is there a way that I can change this, or set the focus to reset each time someone clicks on that thumbnail from the main gallery?

I've never worked with iFrames before, so just want to make sure I understand, since the person in the tutorial isn't using them inside a Lightbox popout.

Report · May 22, 2018

Here is an updated video test. Replacing the Vimeo widget with an iframe HTML link did not seem to fix the issue, unless there's something I'm not doing correctly.

Video link: https://vimeo.com/271350538/f0ca0ddb46

Also, I noticed that the order of the triggers/targets within the composition widget determine the order in which they load, starting from the bottom up. Even when I switch the order, whichever one loads first won't load. Must be something about embedding a composition within a composition, because when I pull them out on their own, they work perfectly. Is there another way to achieve this gallery within a gallery since embedding a composition inside a composition doesn't work?

Thanks for everyone's help!

Report · May 22, 2018

looks like focus is the problem

Is it possible to share a copy of this site page for testing i.e, a .muse file with just this page in it (to limit download size)

dropbox or cc library both allow you to share

Report · May 23, 2018

I looked at your files and while there are some minor mistakes I still can't make this error happen at my end

link 1 = your files upload (as is) to Adobe BC temp site as a baseline Work
link 2 = I have stripped out the non-web safe fonts, added two layers (to make testing simple) and moved some things back into the page layout and uploaded to Adobe BC as a temp site Work

you can select any item in a stack by clicking inside the little box i.e, put a blue dot... see yellow arrows

I'm testing in Australia on Windows 10 systems with FF

this is the results I get when I follow the steps in your vid so please test my two links at your end (link 2 should load a little better) and if you still have the issue on those pages then tell me the exact system + browser

p.s, Ankush are you able to make the error happen at your end mate?

Report · May 23, 2018

I tried both links 1 & 2, and both produce the same error on my end. I did notice however that in the top right thumbnail, I can no longer get the error to occur from your links. It is the one in which I replaced the top video with an embedded HTML iframe instead of the Vimeo widget. Even so, the error still occurs on the other two galleries within that same composition ("Events" and "3D Renderings")

I can't really think of any reason why this would only occur on my system. I'm using Windows 10 Home, latest update version, and as for my browser, it's Chrome:

What were some of the mistakes you noticed in the file?

Report · May 23, 2018

So I just tested out your links using Internet Explorer and Microsoft Edge, and they both work just fine. My testsite also works on both of those, so maybe the issue has to do with Chrome, which is still a problem because I know it is a very common browser. I wonder why Chrome won't play nice with those thumbnails....

Report · May 23, 2018

work around; open the site in your chrome browser and play with it until the error happens i.e, blank vid

in Windows systems hold down [ctrl] + press [-] or [+] to adjust screensize ... does doing this make the vid appear at your end?

Report · May 24, 2018

YES! After scaling, the video does appear, and will stay there through every zoom level. It will even reappear after I close the window and re-open, however if I click away on another thumbnail, the blank frame will appear. Also, the blank frame will appear after the first click regardless of which zoom level I am currently in.

This is promising! Any reason as to why this would occur? Is this a Chrome bug? Or is Muse doing something funny that I could sort out on my end to prevent this from happening?

Report · May 24, 2018

zythe84 wrote
YES! After scaling, the video does appear, and will stay there through every zoom level. It will even reappear after I close the window and re-open, however if I click away on another thumbnail, the blank frame will appear. Also, the blank frame will appear after the first click regardless of which zoom level I am currently in.
This is promising! Any reason as to why this would occur? Is this a Chrome bug? Or is Muse doing something funny that I could sort out on my end to prevent this from happening?

the good news is that your code all works... the bad news is chrome (and I would also assume old internet explorer) browsers are not as efficient as Firefox or Edge and that just don't load everything on the first pass.

what happens when you adjust screensize = the info in that page gets redownloaded so that it can be displayed at the new size... the difference between that and refreshing the page with [F5] is that F5 also resets the page to starting point i.e, the widget goes back to its default | closed statis

you will need to redesign your site to get it working on Chrome; options include having a seperate page for chrome users to goto, having the sub list outside the main widget as you did in your example vimeo or use a iframe "target" system like the tutorial posted above

p.s, you missed the part of that tutorial which talks about adding the "name" + "id" to the iframe

Report · May 30, 2018

I received the following info from Vimeo's support staff. Thought I'd share in case it shed any additional light on the situation:

"When examining the code associated with your page, I detected CSS styling attached to the player iframe. Once the styling was removed, the player appeared successfully as shown here:

Unfortunately, since we do not have any control over the code associated with this gallery, you'll need to alert the author of your plugin of these findings. It's possible you may have a setting or formatting option enabled that forces the player to appear at the wrong size, and thus showing offscreen. You can see that the player loads correctly here- https://player.vimeo.com/video/261205133.

I would guess that it's related to following attributes applied to the parent div containing the player:

data-sizepolicy="fixed" data-pintopage="page_fluidx" data-content-guid="u5319_content"

"

A friend also told me this:

"After inspecting the page with a one of the video galleries open I got a bunch of these same errors in the museutils.js JavaScript file, which I pasted below. (warning: incoming code block):

Seems like this error can occur with players when their origin (Vimeo) is https and the site (CloveHitch) is http. Some people have proposed solutions to this problem( Failed to execute 'postMessage' on 'DOMWindow' ) but it is occurring inside your JavaScript and I am not sure if you guys are interested in (or allowed to) write code or you are just trying to fix it through being a user of Muse.

I tried to find where they defined "origin" so maybe I could make something work but I couldn't figure out how where this was defined.

Some people say this is Chrome specific so you might want to try it on IE or Firefox just to see if you have similar problems. Other's think it doesn't effect the player at all which means your problem is somewhere else.

My only suggestion would be if Muse allows you to set your Vimeo origin URL then see if Vimeo has another origin they recommend for HTTP websites (for instance if you guys or Muse are using the Vimeo API then api.vimeo.com, or something like it, might work better)."

These are a little over my head, but didn't know if they might suggest possible solutions/workarounds to a more advance user.

Any ideas? Replacing them with iframes didn't seem to solve the issue after I reuploaded...

Thanks!

Report · May 31, 2018

your mate is half right and having your site hosted as a http can add a small delay to load times yes

Adobe BC does allow https hosting but Muse and Adobe BC are both eol so I don't recommend them... talk to your host about https or go to i.e, pay for another host
yes Muse does allow self hosting but that is only really an option for small vids and will not solve your issue imo

the Vimeo's support staff part translates to "change your design" because their vimeo is working

Report · May 24, 2018

You're amazing! Would there happen to be any code I could add to the header that would specifically tell Chrome to load these on the first pass to avoid this? Or perhaps I could embed some bit of code inside the Composition widget that would trigger the same "redownloading" effect that the resize causes?

I will try replacing all of them with an iframe and hopefully that will be the work around to avoid completely redesigning a Chrome-friendly version.

I've also reported the issue to Chrome support, so I'll follow up if they offer any sound advice.

Thanks again for all your help! I really appreciate you taking the time to help me figure out the problem.

Report · May 31, 2018

I see. I'm currently trying to write a bunch of code to replace these widgets. I have the iframe set up as the video player, and each thumbnail feeds the proper link to the iframe target. Is there a way to make it so that I can also have a different text box description load beneath the video when each thumbnail is clicked? I tried putting stuff inside the iframe tag, but quickly realized that it doesn't work that way.

Here is the code I have for the player:

and here is my thumbnail section:

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

and I have this CSS embedded in the Page Properties for my Work page:

html,body{

overflow-x:hidden;

}

.tinythumb{

transition: .25s ease;

}

div.thumby {

background-color: transparent;

margin-bottom: 14px;

border: 1px solid transparent;

width: 150px;

height: 84px;

}

div.thumby:hover .tinythumb{

opacity: .85;

}

div.thumby:active {

border: 1px solid #B3B3B3;

}

div.thumby img {

width: 100%;

height: auto;

}

</style>

I'm just now learning all this, so it's probably full of errors

Report · May 31, 2018

to use custom css styles in Muse is tricky... you must first make a graphic style, name and link it to the box you want it to effect then call that style by name in the header of the page properites

width 100% = bad code

so you really like this 30ish vimeo design and want a way to make it load... imo hand coding css to Muse will be hard (a basic iframe is one thing but style is different) and I'd look around for other code options first to see if some other site has something you like the look of

also the other Dreamweaver guys BenPleysier + Nancy OShea will have better knowledge of current code trends and may have widget ideas

Report · Jun 01, 2018

Yeah, I think I've gotten in over my head at this point....

Thanks for all your help!

Adobe Community

Can I view code within Muse to diagnose why my Vimeo thumbnails aren't loading?

1 Correct answer