Search code examples
cssanimationvideoembedvimeo

Setting Poster Image hides all CSS animations


I'm pulling my hair out over this one hiccup. I am using the Zeyn theme with a child theme installed over it. I have two separate pages that have a vimeo embed, and I want them both to have a poster image.

The problem is, on one of the pages there are about 10 divs with animations. When I assign a poster image any text element with an animation completely disappears.

On the second page, the embed, poster image, animations etc are all working just fine.

Here is the page that is NOT working properly. http://216.213.81.216/what-we-do-v3/

There is a poster image currently in place.

The second page that is working fine is here: http://216.213.81.216/who-we-are/

It currently doesn't have any animations assigned, but I just tested them on a bunch of different elements. I'm totally at a loss here.

Best, Dan


Solution

  • the problem is not css. its JS. Check your console

    https://player.vimeo.com/video/158187164 Failed to load resource: the server responded with a status of 403 (Forbidden)
    158187164:1 Refused to load the image 'https://f.vimeocdn.com/p/images/forest.png' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
    
    http://hospitalityq.gibbitz.com/wp-content/uploads/2015/03/logo-mark-favicon.png Failed to load resource: net::ERR_NAME_NOT_RESOLVED
    

    basically its saying that

    1, Change the privacy of the video.

    2, content="img-src 'self' data:; default-src 'self'

    3, fix your favicon or upload one.