Need Help with Video Thumbnails for this Site

I got a CSS for thegrandreport.com. I want to achieve 2 things.

1) How do I increase the number of video thumbnails in each row from 3 to 5 thumbnails?

2) When I play a video, how do I enlarge the video to a bigger size or full screen?

Attached is my CSS for your help. Thanks.

Comments

  • add this:

    body.home .content-wrapper article.index-post {
      width: 18%;
    }
    
    body.home .content-wrapper article.index-post img {
      height: 110px;
    }
    
  • edited September 2017 Chrome
    q1k said:

    add this:

    body.home .content-wrapper article.index-post {
      width: 18%;
    }
    
    body.home .content-wrapper article.index-post img {
      height: 110px;
    }
    
    Thanks man it works.

    I managed to add more code to the CSS to make videos as big as possible without making them sullscreen. But it's not centered correctly vertically and horizontally. Some videos sit just right while others are off center somewhat. What code do I use to make all videos regardless of origin to be as big as possible without being fullscreen and be centered correctly?

    Attached is the new code. Looking forward to hearing from you.
  • You can try applying the responsive video trick, to make the video player always be 16:9 or whatever ratio you want.
    Basically you make the first element, to width 100%, height=0, and padding-top 56.25%. Then the child element is position absolute.
    See here for more details.
  • edited September 2017 Chrome
    Hi q1k,

    I modified a piece of the CSS using your advice. Look below. It looks good but the video covers the comments section which should be located under the video. I tried all values for "overflow" and none have worked. What do you suggest?

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


    body.single .content-wrapper article.post .entry-content iframe {
    height: 760px !important;
    width: 100% !important;
    position: absolute !important;
    padding: 5px !important;
    }
    }

  • This should do it:

    body.single .content-wrapper article.post .entry-content {
      width: 107% !important;
    }
    
    body.single .content-wrapper article.post .entry-content > p:first-child {
      position: relative !important;
      padding-top: 56.5% !important;
    }
    
    body.single .content-wrapper article.post .entry-content > p:first-child iframe {
      height: 100% !important;
      width: 100% !important;
      position: absolute !important;
      top: 0; left: 0;
    }
    
  • Hi q1t,

    Thank yuo very much. Very helpful code. Thanks man!
Sign In or Register to comment.