Need help with custom CSS – Video Gallery
-
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)
-
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!
-
-
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;
}
} -
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!
-
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?
-
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:
-
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.
-
Thanks so much. I seem to have trouble figuring how exactly to paste that after my YouTube url on that page, which is:
-
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 :)
-
-
- The topic ‘Need help with custom CSS – Video Gallery’ is closed to new replies.