Gridding Videos through CSS?

• 

  themarcusfarkus · Member · Sep 29, 2018 at 9:44 pm

  • Copy link
  • Add topic to favorites

  Is it at all possible to grid the videos in my videos page so that the all play natively in rows of three across on the same page?

  Right now I have them stacked on top of each other and that really isn’t working for me.

  Thanks so much

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

• 

  phillipcornwell · Member · Sep 29, 2018 at 11:16 pm

  • Copy link

  Hi @themarcusfarkus,

  Yes, it’s possible to do if you have a premium plan or higher. If you do, go to your site’s customizer and add the following code to the CSS area:

  .page-id-28 iframe.youtube-player {
max-width: 33%;
height: 33% !important;
float: left;
padding: .5 em;
}

  This code is specific to your video page and shouldn’t affect videos on any other page. If you like the way this works and want to extend it to all pages just remove the “.page-id-28 ” from the beginning of the code block (remember to remove the space after 28 too) and it will make all youtube iframes no larger than 33% of the content area.

  Also, this code will affect ALL screen sizes too so mobile devices will see smaller videos as well. If you want the old functionality for mobile we’ll need to wrap a media query around it so it only affects screens with larger resolutions.

  If you don’t have a Premium plan or higher I’m not sure what else could be done. Please let me know if this works or not.

  Thanks!

• 

  themarcusfarkus · Member · Sep 30, 2018 at 10:04 pm

  • Copy link

  Hello, thank you for helping.

  I placed the code in my css, and nothing changed?

• 

  themarcusfarkus · Member · Sep 30, 2018 at 10:05 pm

  • Copy link

  Scratch that. Thank you It works wonderfully!

• 

  phillipcornwell · Member · Oct 2, 2018 at 1:57 am

  • Copy link

  Great news! Glad it worked. :-)