Posting youtube videos on grid

• 

  samwel1 · Member · Feb 5, 2015 at 10:15 pm

  • Copy link
  • Add topic to favorites

  Hi, folks,

  I am wondering what are the css coding that would change the format of my video posts..I need to them to appear like photo gallery in the same posts. I need a 2 by 2 grid format.

  Help me out!

  The blog I need help with is: (visible only to logged in users)

• 

  designsimply · Member · Feb 13, 2015 at 7:42 am

  • Copy link

  I checked http://keggyskorner.com/ and I see that you are using the Soundcheck theme. I clicked on “Videos” in the main menu and was taken to http://keggyskorner.com/category/videos/

  On a category page such as http://keggyskorner.com/category/videos/ you can make the videos in the main content area display 2 per row with the following CSS:

  .video .entry-content .wp-embed {
  	float: left;
  	width: 49%;
  }
  
  .video .entry-content .wp-embed:nth-child(odd) {
  	margin-right: 2%;
  }

  The “.video” part of the selector limits the change to any page with a body class of “video.”

  Note that this may need to be adjusted if you were referring to a page other than http://keggyskorner.com/category/videos/

  The first video on that page is not included in the grid. That’s because the theme adds it into a separate container. I don’t see a simple way to get it to display as part of the other grid because of how the HTML is structured. You could either leave the top video on that page full width or hide it like this:

  .video .entry-video {
  	display: none;
  }

• 

  samwel1 · Member · Feb 13, 2015 at 8:07 pm

  • Copy link

  @designsimply, thanks so much for your codes, it was very helpful and it did exactly what I wanted. Thanks a lot!

  That being said, I was wondering what could I do to change the display pattern of my posts. I don’t what my pages to be packed with full display of old posts. So I was wondering if there’s a way I could make it to only show 7 new posts and create a ” click more button” for the former posts?

• 

  staff-happychia · Staff · Feb 14, 2015 at 2:58 am

  • Copy link

  None of your pages seem to contain more than 7 posts. However you can specify 7 in the Blog pages show at most field on the Dashboard > Settings > Reading screen and click Save Changes button at the bottom of the screen.

  If you have Infinite Scroll enabled, when you get to the bottom of the page, you’ll see a loading icon display briefly as the next seven posts load below.

  Without Infinite Scroll, Load more posts button will appear.