Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #872898

    I have a Youtube video in a color section at the top of the page and when the page loads the video is cut off at the bottom. There is an object (planetoid) that is floating over the video, and when the page first loads, the bottom of the object sits below the bottom of the video. It is supposed to be right in the middle of the video. If I refresh the page, the video appears correctly with the object in the middle.

    On another page with just a full stretch to fit image in a color section, and the page set to transparent header, the page loads with a regular header. If I refresh the page, the transparent header works.

    Any idea why this happens, why it is fixed with refreshing, and what I can do?


    Hey rasa,

    Which browser are you using? Works fine in Chrome on a Mac.

    Best regards,


    I just tried it in Chrome, and it worked. I usually use Safari. I just tried it in Safari and Firefox, and the video gets cut off. I just noticed that in Safari when I resize the app’s window the video corrects itself. Yesterday I tried making the spacer I put below the floating planetoid a little larger, and that seemed to help in that it still cut off the bottom of the video, but not as much.



    I can’t reproduce the issue either. Please try this css code to fix the issue with the video background.

    #top .av-video-slide video {
        height: auto !important;
    #top .av-video-slide .mejs-container {
        width: 100% !important;

    Best regards,

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.