VIDEO ON ART THEME

[Skandrew]

Hi,

I have been using the Standard Gallery for my portfolio pages. I was wondering if there is a way I could add youtube videos throughout the gallery? I see where I can place the embedded video code and it allows me to put a video at the bottom or top of gallery. But is there a way I can add more than just one video?

Andrew-

[SeaTheme]

Hi,

You can add more videos by some custom css, but it can not be listed by 2-4 grids/row, it only be listed 1-video/row

===========

How to insert multiple videos into a single gallery post?

The single gallery post(Gallery on Right/Left template) can show one video on the gallery list(Top or Bottom) by default(It needs to enable “Show Video”). If you want to show more videos, please following:

(1) You could enter HTML codes into “Embed Code” like the demo codes:

Vimeo:

<div class=video-wrap style=padding-top:56.667%><iframe src=//player.vimeo.com/video/67659148 width=500 height=281 frameborder=0 webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
<div class=video-wrap style=padding-top:56.667%><iframe src=//player.vimeo.com/video/46393681 width=500 height=281 frameborder=0 webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>

Youtube:

<div class=video-wrap style=padding-top:56.667%><iframe src=//www.youtube.com/embed/c0ehRPQw2g4 frameborder allowfullscreen></iframe></div>
<div class=video-wrap style=padding-top:56.667%><iframe src=//www.youtube.com/embed/X3-fQSngZto&t frameborder allowfullscreen></iframe></div>

Note: the demo codes are with two videos, you could add more.
Note: please don’t use quotation marks in the embed codes
Please select at least one image for “Select Images”, or there will be an error. If you don’t want to show an image, please upload a blank image.

(2) Paste the custom css code to “Appearance > Customize : Additional CSS”:

 .single-gallery-wrap-inn > .video-post-wrap { padding-top: 0!important; }
.single-gallery-wrap-inn > .video-post-wrap .video-wrap { margin-bottom: 40px; }
.single-gallery-wrap-inn video.lazy-hidden { opacity: 1;position: absolute; top: 0; left: 0;right: 0;  bottom: 0; }

You need to adjust the 20px based on the image spacing.

[Skandrew]

Awesome that worked! How can i adjust the spacing thought between an image and my video in the standard gallery?

See attached screenshot.

[SeaTheme]

Leave your page url please.

[Skandrew]

Sorry. I thought it was simple enough from the screenshot i provided? Just trying to leave a spacer gap between the video and image in the standard gallery.

http://www.skandrew.com/ux-portfolio/googlenationalparks/
password: 6336

[SeaTheme]

Thanks! Yes, the fastest way is check the page url directly

Paste the custom css code to “Appearance > Customize : Additional CSS”

.ux-is-galllery-template-body .gallery-spacing-40 .list-layout-text {
    margin: 40px 0 -40px 40px;
}

[davidtse]

there is problem everytime i do that, it just wont save and update…

and can I align the text on my front page to the left?

http://www.secondmind.hk/

Thanks

[SeaTheme]

See the screenshot to align text:

https://drive.google.com/open?id=1XItKwJB9ErZ5blF8j9gtSQeP2KQFkXmX

[kajahaven]

This reply has been marked as private.

[SeaTheme]

Hi kajahaven, please send your question and wp-admin(url/user/pass) via
my profile contact form (you need login on ThemeForest), I’ll log in to check it.

[Marilize]

This reply has been marked as private.

[SeaTheme]

Hi Marilize, I checked your page, I didn’t see the codes.

Regards

[Marilize]

This reply has been marked as private.

[SeaTheme]

Hi,

The solution of this post is to use the embed video(Youtube or Vimeo, not uploaded video from ‘Add Media’ ) in “Text” of “Gallery Layout Builder”. It is the best way to do Image-Video-Image-Video layout.

Regards

[kasper]

Is there a way to make sure it have full bleed on mobile view. It works perfectly on Desktop. But have padding all around on mobile?

Best,
Kasper

[SeaTheme]

I need to check the lived webpage if there is a solution, please leave the page URL, thanks!

[kasper]

Sure: https://www.kaspernyman.dk/ux-portfolio/halo/ looks correct on desktop with full bleed of the extra videos. But on mobile there is a padding of x pixels all around the embed video?

[SeaTheme]

Please paste the custom CSS code to “Appearance > Customize: Additional CSS”:

 @media (max-width: 767px) {
 .responsive-ux .list-layout-text {
    padding: 0;
 }
}

[kasper]

Thank you so much!

[Author]

Posts