Thunder Pack 'Cinema' Stack Not Playing in Safari

Sure. I don’t think it will do any good there. But please, try what I’ve outlined already first. The more simple the page you make the easier it might be to troubleshoot on their end if you have two go that route. I don’t suspect it is specifically server related, so trying everything else FIRST is important.

1 Like

Hi @elixirgraphics - I’ve just built another very simple page as suggested by you following the ‘How to Build A Portfolio’ and including the ‘Cinema’ stack. Alas still no joy. The movies still do not play on Safari. All other browsers are fine. I’ve got a hunch that the problem might be something to do with me using CloudFlare as this is where I get my SSL certificates for my websites. There have been some suggestions o the forums for me to include the following code into my htaccess file- SetEnvIfNoCase Request_URI .(mp4|ogv|webm)$ no-gzip dont-vary. Here’s hoping it works. Justin

Sorry you’re having troubles. It definitely seems like something to do with your setup in some way. Myself and others are having no problems with Safari playing the video(s). Here’s hoping you get your troubles worked out.

As a complete aside, I have to ask, out of curiosity why you never just built the page that I laid out in my post here, but instead built much more complex and time consuming layouts?

This is just to sate my curiosity – that is all. If there’s no reason, that is fine too.

Hi @elixirgraphics - I used the Spark theme to test out the problems I am experiencing with ‘Cinema’ as part of my process of elimination. Using a trusted theme from Elixir enabled me to deduct that it wasn’t a problem experienced just in non Elixir themes or home built themes. We’ve since deducted that it is nothing to do with the stack of the themes and I’m starting to believe that it is a server issue. Next thing for me to do is to locate the a .htaccess file on my server so that I can paste the suggested code found in this Cloudflare article . Kind Regards | Justin :slight_smile:

OK. Thanks for the reply.

Hi @elixirgraphics - just a quickie to let you know that by dropping the above code into my .htaccess file the animation now plays on the following domain :slight_smile: Thanks for all your help and patience thus far. I am however still experiencing some anomalies with the stack in that A. the overlay feature is not covering 100% of the movie. I have attached a screenshot of my ‘Cinema’ control panel so that you can see the settings that I am using B. the movie file displays differently depending on which browser I am in. Is this usual ? What advice would you give ? Kind Regards | Justin

Overlay is working fine here. I’ve put a green overlay on this video. Clear your browser cache and then re-visit this page.

The videos on this test site here and here play the same in Friefox, Safari and Chrome.

Hi @elixirgraphics - unfortunately the overlay for me is not working as it should and I’m still seeing gaps in the overlay. Comparing the way that the movie is presented back in Safari and Chrome using the page that you shared they are different. Chrome appears to reveal a lot of the source movie file than Safari. Any ideas why ? Kind Regards | Justin

I don’t know why you’d be seeing anything different than what I am in Chrome. This is what I see in Chrome:

As for things displaying differently across browsers – that would be up to the browser. Not all browsers are equal or work the same. Each is independently coded and do not all conform the same to all standards.

On your page I’m seeing the issue, but I don’t see it on any of my pages using Cinema, or the demo pages.

On your site it can be fixed with the following custom css;

.cinema_content {
   width: 100% !important;
}

But it’s not really a proper fix, you need to dig down and work out the issue. As I said further up there, I’m pretty confident this is either down to the way you’ve compressed/edited the file, or your server. Although why that would effect the width of the overlay is way beyond my paygrade!

I would though first strip out everything else on ythe page and see if that fixes it.

EDIT: Is there anything on the page that isn’t native Foundry? If there is, start by removing that.

EDIT Pt.2. How have you added that little button/link to Unsplash? Is that added via a bit of code from Unsplash?

Hi @elixirgraphics - yes that is what I am seeing in Chrome also - and different to how it is displayed in Safari ( notice the absence of the detailed tubes ) it sounds like I will have to take into consideration this differences between browsers as I put together my movies together . Kind Regards | Justin

I can actually repeat this issue, although only in preview. Once published it’s fine.

On the top cinema stack, the one with some text, the issue isn’t there in preview. But on the bottom one, with no text, it is, although it’s dropping about 10% short, not half way.

But, once published it’s all fine: Untitled Page | My Website

Hope that helps!

If I’d known @DinkyPixel was referring to Preview Mode before I’d have been testing there. @DinkyPixel’s earlier posts only referred to Safari, Chrome and Firefox, from what I can remember. Am I mistaken?

Is this the case @DinkyPixel – are you only seeing this mis-alignment in Preview mode?

That said, I can recreate what @TemplateRepo outlines in Preview Mode only. This corner case Preview Mode with no content can easily be addressed in a future update.

1 Like

I’m seeing the opacity feature only being applied to 50% of my movie in preview mode @elixirgraphics . I’m also seeing the same opacity issue across Safari, Chrome and Edge browsers when published - https://whitehorse-consultancy.com/cinema/

Then please do as I suggested here, back in my second post.

Build a page that looks like this, as I outlined in the post I reference above.

Then test and share that URL with us. Don’t copy and paste anything from your current project file. Build a completely new project from scratch. Don’t build anything else. Just that.

Thanks @TemplateRepo but I have built a page from scratch and still the opacity issue with the ‘cinema’ stack persists. As this happens in preview mode this leads me to believe that it isn’t a server problem. As I mentioned earlier the footage that I’m using I’ve downloaded from the 'Cinema ’ stack page so surely it can’t be about compression - can it ?? #stumped

I’ve outlined what I need for you to do to help you. After you do that also send me the new project file so I too can publish it here.

Will look at this tomorrow @elixirgraphics. It’s been a long day. With lots of dummy pages built. Thanks for all your help and patience thus far :slight_smile:

OK. I’m off for a three-day weekend, so I won’t be able to look at this until Tuesday most likely.

1 Like