Support » How-To and Troubleshooting » Tons of space suddenly at the top

Tons of space suddenly at the top

  • I had my website designed nicely (almost totally satisfied) and all of the sudden there is all this space at the top of my pages with videos on them and the videos are all squished and little. I’ve looked in the code and can’t find anything and even tried rewriting the code, but nothing seems to change. How do I fix this???

    My website is: http://loisharoldsen.com

    The pages with issues: Tips for Healing (and all subpages from that)

Viewing 11 replies - 1 through 11 (of 11 total)
  • Your video element has a lot of padding on top:

    <div class="fluid-width-video-wrapper" style="padding-top: 400%;">
    So that’s what you need to adjust. 100% seems to cure it.

    That did not seem to do anything…? is there a way I can show you what my code says? There is nothing in my code about “padding” and I just copied and pasted what you had and changed it to 100% and it didn’t solve the problem.

    No matter what I do, if I add the video to these pages, it puts the video WAY down at the bottom. I tried taking it out altogether and re-embedding it, but it just goes WAY down at the bottom again. Is there a solution?

    I can only see the output code and that line I quoted is part of it. On another page it was like 75% padding and the video looked perfect. So how are you inserting the videos? My guess is your theme is creating that code. As a workaround, you can probably override it by adding this to your stylesheet:

    .fluid-width-video-wrapper {padding-top: 100% !important;

    That did not fix the problem 🙁 ugh this is extremely frustrating. If I create an entirely new page for the video would it even help?

    Hopefully you noticed I left off the last }.
    .fluid-width-video-wrapper {padding-top: 100% !important;}
    I tested that with a web developer tool and it worked. As I asked before how is this video being inserted?

    Yeah I tried adding the other } and it still didn’t work. I guess I missed the question about how I add the videos sorry… I am just getting the embed code from the YouTube videos so our YouTube gets more views and likes and shares and so forth

    I went straight to the only place in the style sheet that I could find .fluid-width-video-wrapper using ctrl f and pasted padding-top: 100% !important; there and it still didn’t work. Is there maybe something else that could work? Or am I just too inexperienced to do this right?

    Sorry I responded to you in the wrong thread.
    It looks good here (in Firefox). Try clearing browser cache and hitting f5 a few times to refresh.
    It should probably be closer to 75% not 100% too because there’s still some space above and below the actual video.

    I went into firefox to see if I could better fix the issue and now the videos are just really long and won’t change when I change the size…? I’m so sorry this is being such a pain but I really appreciate your helping me. Any suggestions to just have a 560 x 315 video again?? I have no idea how it got so screwed up like this! I didn’t change any of the code

    If you mean the black section above and below the actual video when it’s playing, that maybe because the video is resizing to fit the space and keeping it’s proportions.
    Here’s the embed code of a video:
    <iframe width="640" height="360" src="//www.youtube.com/embed/8EQW2I-bz7g?feature=player_embedded" frameborder="0" allowfullscreen></iframe>
    The width is 640 but the horizontal space available on your page is only 604px. The video reduces width but also height to maintain its proportions.
    Try changing the code to width=”600″ height=”335″ (or thereabouts).

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Tons of space suddenly at the top’ is closed to new replies.