Video Embeds display in Tiled or Grid Layout

workforcevideos · Member · Jan 17, 2017 at 7:44 pm
Copy link

Add topic to favorites
On this page – https://workforcevideos.com/2016/12/01/sample-videos/

I am am trying to get my 6 Vimeo embeds to display in some sort of classy-looking tiled display or grid. I’ve tried using HTML tables and columns, but I lose my classy Vimeo embed thumbnail size, which in turn negates the title overlays, etc.

Vimeo has a sweet Montage widget creator but only generates JavaScript. Anybody have some CSS magic I could use?

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jan 19, 2017 at 7:27 pm
Copy link
Hi there, the visibility of the captions and controls are set in the Vimeo code, which is in an iframe, so we can’t change that behavior (disappearing when narrower). What I might suggest though is that you remove the style declarations from your divs and add CSS classes and then we can use a media query to limit the two columns to screens perhaps 900px and wider. That way the videos do not get tiny on smaller screens (small tablets and phones. Below 900px, it will return to a single column. Change your two opening div tags so they look like this
<div class="left-col">
and
<div class="right-col">
and then add the following to your custom CSS and see what you think.
```
@media screen and (min-width: 900px) {
	.left-col, .right-col {
		width: 40%;
		padding: 0 10px 0 0;
	}
	.left-col {
		 float: left;
	}
	.right-col {
		float: right;
	}
}
```
workforcevideos · Member · Jan 20, 2017 at 5:55 pm
Copy link
thank you so much I appreciate your time!
thesacredpath · Member · Jan 21, 2017 at 2:39 am
Copy link
You are welcome.

No items found.