Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] responsive video leaves margins when I do max video width/height

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #209734
    sidlin03
    Participant

    http://codepen.io/anon/pen/zvEaoO

    I am trying to have a max width/height for my video. BUt when is use the responsive videowrapper that I got from an article on this site, which was very helpful. It leaves this huge margin above the text.

    I have tried to create a container and wrapped that video inside but that didnt work. I also want the video to float to the right and still cant get that to work after videowrapper has been placed. I have removed the floating code.

    Any ideas? Thanks

    #209735
    Beverleyh
    Participant

    There’s a lot going on in the provided markup – for future reference, we just need the HTML for the video and a paragraph below (just enough to demonstrate the problem).

    I imagine that the issue is caused by the max-width and max-height set on the iframe. Set it on the wrapper instead to see if that helps.

    #209736
    sidlin03
    Participant

    So I took out the width and height from the iframe and still get same issue
    http://codepen.io/anon/pen/zvEaoO

    #209753
    Beverleyh
    Participant

    The CSS – max-width and max-height is still set on ‘.videoWrapper iframe’ (remove those declarations)

    Try putting another wrapper div around ‘.videoWrapper’ and set a max-width on the wrapper div instead.

    A max-height shouldn’t be necessary because the intrinsic width ratio will naturally limit the height.

    #209867
    sidlin03
    Participant

    SO that worked great. My next issue is that now, I can’t get the video to float to the right. It seems it has to do with the videowrapper.

    https://codepen.io/anon/pen/zvEaoO

    #209868
    sidlin03
    Participant

    I figured it out. Thanks for all your help.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.