WordPress.org

Ready to get started?Download WordPress

Forums

Tons of space suddenly at the top (12 posts)

  1. SBrown1
    Member
    Posted 3 months ago #

    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)

  2. webbrewers
    Member
    Posted 3 months ago #

    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.

  3. SBrown1
    Member
    Posted 3 months ago #

    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.

  4. SBrown1
    Member
    Posted 3 months ago #

    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?

  5. webbrewers
    Member
    Posted 3 months ago #

    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;

  6. SBrown1
    Member
    Posted 3 months ago #

    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?

  7. webbrewers
    Member
    Posted 3 months ago #

    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?

  8. SBrown1
    Member
    Posted 3 months ago #

    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

  9. SBrown1
    Member
    Posted 3 months ago #

    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?

  10. webbrewers
    Member
    Posted 3 months ago #

    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.

  11. SBrown1
    Member
    Posted 3 months ago #

    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

  12. webbrewers
    Member
    Posted 3 months ago #

    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).

Reply

You must log in to post.

About this Topic