Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

2 Questions on Video in CSS

edited September 23 in Style Development Chrome
I got 2 questions on CSS on thegrandreport.com. I'm using Firefox:

1) Look at the element circled in red in the attached image. How can I remove the top bar during video play while keeping the top bar in the home page? And when the top bar is removed I want the video to position up at the edge of the screen.

2) How can I make videos have a 16:9 aspect ratio while I can zoom in and out the page while the video doesn't change size?

I'm also attaching my CSS. Looking forward to you guy's help.
1913 x 1043 - 1M

Comments

  • edited September 23 Firefox
    1. You can only have different CSS if the URL changes or based on window width/height (media queries), not if something is playing or not.
      This will get rid of the top bar whenever the URL is not exactly http://www.thegrandreport.com/

      @-moz-document regexp("http:\\/\\/www\\.thegrandreport\\.com\\/.+") {
          .navsearch-wrapper { display:none !important; }
      }
      

      By using display:none the element is completely removed, gives its space to following elements which will move up. They may have a margin-top or padding-top which you still need to remove.

    2. I have not heard about disabling zoom for certain elements would be possible with CSS. If you've seen that somewhere, it probably was done with some JavaScript changing the element's size back everytime you zoom to create the effect.
      If you're looking only for the aspect ratio, this can help: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp


    1. I have not heard about disabling zoom for certain elements would be possible with CSS. If you've seen that somewhere, it probably was done with some JavaScript changing the element's size back everytime you zoom to create the effect.

      If you're looking only for the aspect ratio, this can help: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp


    Hi stonecrusher,

    Appreciate the help for the 1st issue, it worked. But for my 2nd issue I still have a problem with the aspect ratio. I looked at the link explaining adding, "padding-top: 56.25%". But all it does is warp the size and position of the video. It doesn't work.

    Look at the URLs below for the 2 different video types on thegrandreport.com. One is youtube and the other is non-youtube. They give different aspect ratios.

    Attached is my modified CSS so you can check it out and correct if need be. Looking forward to your reply. Thanks.


    http://www.thegrandreport.com/msnbcs-lawrence-odonnell-loses-malfunctioning-earpiece/

    http://www.thegrandreport.com/whos-mama-dck-challenge/

  • edited September 25 Firefox
    For me they are both 16:9. See screenshots. Not sure what you mean, please give screenshots of what is wrong/what should be.
    The youtube one didn't play, it just says "unavailable".

    By the way you set the closing brace wrong. Don't put it under my @-moz-document code but before.
    Or to say it different: paste my code at the very very end.

    Maybe you meant to change the object-fit of
    .jwplayer.jw-stretch-uniform video
    ?

  • By the way you set the closing brace wrong. Don't put it under my @-moz-document code but before.
    Or to say it different: paste my code at the very very end.


    I'm a bit confused by you mean regarding the brace at the end. Do you mean I should make the code at the end look like this?

    body.single .content-wrapper article.post .entry-content {
    width: 105% !important;
    right: 4.7% !important;
    position: relative !important;
    padding-top: 1% !important;
    }

    body.single .content-wrapper article.post .entry-content iframe {
    height: 750px !important;
    width: 113% !important;
    position: relative !important;
    padding: 5px !important;
    right: 7% !important;
    margin-top: -4px !important;
    }
    }


    @-moz-document regexp("http:\\/\\/www\\.thegrandreport\\.com\\/.+") {
    .navsearch-wrapper {
    display:none !important;
    }

    div.middle-wrapper {
    margin: -3.7em auto !important;
    }
  • No, I meant like this:
    https://pastebin.com/X9PQc2qK

    So the second @-moz-document rule is not inside the other. It has to be on the same level.

    By the way some of your CSS selectors were too specific in my view and I removed them to have less clutter. You don't need tag.classname, .classname alone is enough as in this case (like in most cases) the classnames are not used on varying tags.

    I may have oversimplified because I didn't check back (just made a quick half-automated edit) and don't know every subpage of that domain.

    But from my feeling and experience it should work ;-)

    Just ask back if it doesn't anymore.

  • No, I meant like this:

    https://pastebin.com/X9PQc2qK

    Ho stonecrusher,

    your code messes up the thumbnails in the home page by stretching them out. And theres now 3 thumbnails per row instead of 5 on it. Maybe you can fix this?
  • edited September 30 Firefox
    Then you may have used some styles overwriting each other (I reordered the rules) or I removed some specifity that was actually needed.

    Just use this:
    https://pastebin.com/xhFtiL4J
  • Then you may have used some styles overwriting each other (I reordered the rules) or I removed some specifity that was actually needed.

    Just use this:
    https://pastebin.com/xhFtiL4J

    Hi stonecrusher,

    Hey man, thanks for the help! That worked. Have a cool weekend.. or whats left of it.
Sign In or Register to comment.