Gallery block auto play video

Site URL: https://www.laineylee.com/

Hello, I'm trying to add video clips from vimeo into my main page gallery block. When I add the following code I just get a blank grey box for that section instead of my video autoplaying.

<iframe src="https://player.vimeo.com/video/675536025?autoplay=1&loop=1&autopause=0&background=1&color=ffffff&controls=0&portrait=0" width=“640” height= “360”  frameborder="0" allow="autoplay; fullscreen"  allowfullscreen></iframe>

Not sure what's wrong as this code works throughout my website to auto play videos just fine, just not in gallery.

Any help appreciated!

You added to Code Block, Embed Block or..?

Hi @tuanphan , I was trying to add it to the image gallery I currently have auto scrolling on my homepage. I was trying to use an embed code.

I'm having the same issue trying to embed videos into a video gallery block on 7.1. The videos load when I use a Vimeo url, but nothing shows up when I use the Vimeo embed code, which I'd prefer so they'll autoplay. Any ideas?

Paste where? Design > Custom CSS

// Autoplay reel //

.gallery-reel-wrapper   {overflow: hidden; /*height: 510px; width: 728px; margin: 0 auto;*/ }

.gallery-reel-list      {width: 2912px; animation-name: behindscenes; animation-duration: 30s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; 

	animation-play-state: running;}

.gallery-reel-list:hover {animation-play-state: running;}

@keyframes behindscenes {0% {margin-left: 0px;}

  50% {margin-left: -50%;}

  100% {margin-left: -100%;}  

}

// Autoplay function //

.target   {overflow: hidden; /*height: 510px; width: 728px; margin: 0 auto;*/ }

.target     {width: 2912px; animation-name: behindscenes; animation-duration: 30s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; 

	animation-play-state: running;}

.target:hover {animation-play-state: running;}

@keyframes behindscenes {0% {margin-left: 0px;}

  50% {margin-left: -50%;}

  100% {margin-left: -100%;}  

}

Thanks, @Mdhanjal.

It didn't really do anything, though. My embedded videos aren't showing up even with the code. I also tried it with urls rather than embedded code, but the autoplay didn't work there, either.

I'd also like to do this on a gallery page - https://www.jlnguyen.com/accountability-rebrand

Right now the video has to be clicked and it plays in a lightbox. I would rather it autoplay on the page without lightbox.

Has anyone found a way to do this? I've been looking to create a portfolio with both photos and videos that autoplay and loop. I know Circle Members have access to upload photos and videos in a gallery block but there isn't any cropping or autoplay controls with that. And I'm hoping to create something like this: https://www.macshoop.com 
 

I didn't see any sure examples of this effect with the Lightbox plug-in either (the closest they had was with gifs, which I would like to avoid for speed). I'm also not looking to lightbox these items at all, just a scrollable gallery that's responsive. Does anyone think the Lightbox plug-in would be the best fit for this effect? @Beyondspace
https://beyondspace-showcase.squarespace.com/squarespace-video-lightbox

I wish Squarespace had more video options in a gallery-type layout. We work in photos and videos and would like a way to show them both off together side by side. Does anyone have any ideas on how to approach this?

32 minutes ago, ncast21 said:

Has anyone found a way to do this? I've been looking to create a portfolio with both photos and videos that autoplay and loop. I know Circle Members have access to upload photos and videos in a gallery block but there isn't any cropping or autoplay controls with that. And I'm hoping to create something like this: https://www.macshoop.com 
 

I didn't see any sure examples of this effect with the Lightbox plug-in either (the closest they had was with gifs, which I would like to avoid for speed). I'm also not looking to lightbox these items at all, just a scrollable gallery that's responsive. Does anyone think the Lightbox plug-in would be the best fit for this effect? @Beyondspace
https://beyondspace-showcase.squarespace.com/squarespace-video-lightbox

I wish Squarespace had more video options in a gallery-type layout. We work in photos and videos and would like a way to show them both off together side by side. Does anyone have any ideas on how to approach this?

 

Mac Shoop Home Page.mov 44.74 MB · 0 downloads

If lightbox if not what you wanted, maybe a grid with videos and images on Fluid engine can help?

Video blocks on Squarespace can be set to autoplay, muted and loop with bo controls

@Beyondspace I did explore that option, however, it's not the most device-responsive. I'm looking to do this with a gallery so that both the photos and videos can be in a neat and responsive grid. I did see https://www.emiledits.com who also uses the Lightbox plug-in. However, he created the gallery grid on his page using Gifs right? I read that on your case study here: https://www.beyondspace.studio/case-studies/maximizing-video-portfolio-engagement-case-study-of-emil-schnstrm?mnc-sel=div%3A1>main%3A3>article%3A1>section%3A1>div%3A2>div%3A1>div%3A1>article%3A1>div%3A1>div%3A2>div%3A1>div%3A1>div%3A1>div%3A1>div%3A1>div%3A1>div%3A1>figure%3A1>figcaption%3A2>div%3A1>p%3A1

I'm looking to use video embeds from Vimeo for the grid, I just wanted to know if you think the video Lightbox plug-in would be the right fit for this. Or if anyone else has any ideas for how we can achieve this.

1 hour ago, ncast21 said:

@Beyondspace I did explore that option, however, it's not the most device-responsive. I'm looking to do this with a gallery so that both the photos and videos can be in a neat and responsive grid. I did see https://www.emiledits.com who also uses the Lightbox plug-in. However, he created the gallery grid on his page using Gifs right? I read that on your case study here: https://www.beyondspace.studio/case-studies/maximizing-video-portfolio-engagement-case-study-of-emil-schnstrm?mnc-sel=div%3A1>main%3A3>article%3A1>section%3A1>div%3A2>div%3A1>div%3A1>article%3A1>div%3A1>div%3A2>div%3A1>div%3A1>div%3A1>div%3A1>div%3A1>div%3A1>div%3A1>figure%3A1>figcaption%3A2>div%3A1>p%3A1

I'm looking to use video embeds from Vimeo for the grid, I just wanted to know if you think the video Lightbox plug-in would be the right fit for this. Or if anyone else has any ideas for how we can achieve this.

Yes, he used Gifs files for the thumbnails and I can see the quality is ok, do you want to make a preview on your videos with lightbox studio enabled?

fyi, gallery block with videos from Vimeo can only play one video at a time, so you may not be able to create a autoplay loop videos grid like the reference