Need help with custom CSS – Video Gallery

sjurcevic · Member · Feb 10, 2017 at 6:25 pm
Copy link

Add topic to favorites
Hi there! I was referred here by one of your engineers to get help with a custom CSS.

I’m looking to create a video gallery on one of the pages on my website, using my YouTube videos. Right now I have playlists embedded, but I’d like to be able to show specific videos very clearly in a series of rows and columns.

I’m using the Argent theme.

My website is https://explainer-video-voice-girl.com and the page I’m looking to update is the “My Work” page.

Thanks so much.

The blog I need help with is: (visible only to logged in users)
staff-loquaciousloon · Staff · Feb 10, 2017 at 8:00 pm
Copy link
Hi @sjurcevic!

We should be able to get that working. First, add the videos you want to your page by pasting in the video URL.

Don’t do anything to format them (no sizes, no alignments, just the basic video URL.

If you publish and view the page, you should see a column of videos.

Try adding this CSS to break them into three columns:
```
@media screen and (min-width: 700px) {
    .jetpack-video-wrapper {
        width: 30%;
        float: left;
    }
    .jetpack-video-wrapper:nth-of-type(3n + 2) {
        margin-left: 1em;
        margin-right: 1em;
    }
    .jetpack-video-wrapper:nth-of-type(3n + 4),
    .jetpack-video-wrapper:last-of-type {
        clear: both;
    }
}
```
If the preview doesn’t look quite right, try clicking Save & Publish and reloading the page :)

This is set up to only take effect on screens that are 700px or wider, so you aren’t showing people little tiny videos on mobile devices (picture three videos side by side on your cell phone screen – tiny!)

Let me know how it goes!
sjurcevic · Member · Feb 10, 2017 at 9:34 pm
Copy link
Thanks so much! I’ll try this and let you know.
sjurcevic · Member · Feb 10, 2017 at 9:50 pm
Copy link
I think I did this wrong. I tried pasting your CSS in various spots, but it didn’t seem to work. Can you help me correct this? I have the 9 video URL’s I want to add initially:

https://youtu.be/oDqL4uHaMWM
https://youtu.be/-EkZZeu-R9g
https://youtu.be/qYPqCEtyPjo
https://youtu.be/VSyjQZtH77Y
https://youtu.be/JjBQWaWF-PA
https://youtu.be/UABnJixegHg
https://youtu.be/pXA2po-rhJQ
https://youtu.be/WwxZuLKgg8Y
https://youtu.be/ehZ-b8cpyq0

@media screen and (min-width: 700px) {
.jetpack-video-wrapper {
width: 30%;
float: left;
}
.jetpack-video-wrapper:nth-of-type(3n + 2) {
margin-left: 1em;
margin-right: 1em;
}
.jetpack-video-wrapper:nth-of-type(3n + 4),
.jetpack-video-wrapper:last-of-type {
clear: both;
}
}
staff-loquaciousloon · Staff · Feb 13, 2017 at 2:53 pm
Copy link
Hm. Can you take a looks at it now?

I dropped in the CSS from my last post, and saved it, now I’ seeing this:

https://cloudup.com/cWdim6kPQDl

in both Chrome and Safari.

Let me know if it look different for you!
sjurcevic · Member · Feb 13, 2017 at 4:24 pm
Copy link
That’s perfect. Thank you!

If I end up wanting to add a few more videos at a later time, do I just paste the new YouTube url’s like before? Is there anything I need to add to my edit page other than those YouTube url’s?
sjurcevic · Member · Feb 13, 2017 at 4:37 pm
Copy link
So sorry, one more thing. I just noticed the video on my main page got smaller after this change. Is there a way to make it at least twice as large again more centered?

This is what I have pasted there now for the video:
staff-loquaciousloon · Staff · Feb 14, 2017 at 1:47 pm
Copy link
So sorry, one more thing. I just noticed the video on my main page got smaller after this change. Is there a way to make it at least twice as large again more centered?

Ah, sorry about that – the CSS is broad and targets all videos. We can make it look only at that one specific page. Replace the CSS you have now with the following:
```
@media screen and (min-width: 700px) {
	.page-id-64 .jetpack-video-wrapper {
		width: 30%;
		float: left;
	}

	.page-id-64 .jetpack-video-wrapper:nth-of-type(3n + 2) {
		margin-left: 1em;
		margin-right: 1em;
	}

	.page-id-64 .jetpack-video-wrapper:nth-of-type(3n + 4),
	.page-id-64 .jetpack-video-wrapper:last-of-type {
		clear: both;
	}
}
```
If you need to make another page with a grid in the future, you can use the ID of that page in a similar way :)

If I end up wanting to add a few more videos at a later time, do I just paste the new YouTube url’s like before? Is there anything I need to add to my edit page other than those YouTube url’s?

Yep, just adding more URLs to that page should be all you need :) WordPress will embed them automatically, then on the live site the CSS will rearrange them.
sjurcevic · Member · Feb 14, 2017 at 4:22 pm
Copy link
Thanks so much. I seem to have trouble figuring how exactly to paste that after my YouTube url on that page, which is:
staff-loquaciousloon · Staff · Feb 15, 2017 at 1:57 pm
Copy link
The CSS in my last reply doesn’t go on the page, it goes under My Site > Customize > CSS.

Remove the code I gave you the first time, and replace it with the new CSS :)
sjurcevic · Member · Feb 15, 2017 at 5:00 pm
Copy link
Got it. That worked! Thank you so much for all your help.
staff-loquaciousloon · Staff · Feb 16, 2017 at 1:18 pm
Copy link
You’re welcome! :)

No items found.