Streaming live at 10am (PST)

Vimeo video link attributes disappearing in CMS


#1

Hi there,

I was wondering if I was doing something wrong while trying to autoplay my video (viemo link) set up in my collection list.

I have added autoplay=1&loop=1&autopause=0" as specified by vimeo after my video url but it seems like webflow discard that information and only retains the video basic link without its autoplay properties.

Any idea how i could autoplay my viemo video ?
Thank you :slight_smile:


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Hi @anthonysalamin I’m happy to help look into this.

Can you please provide a read-only link:

and the link to your vimeo video?

I’ll be standing by for your response.


#3

Hi Nelson !

Thank you for replying to me !!
Here is my read-only link
And here is my vimeo video link
The URL I would like to put the autoplay video is that one

PS: I discovered Webflow thanks to you and your video on youtube about four months ago :slight_smile: I love your tutorials and lives !


#4

Hello :slight_smile:

Just wanted to know if there were any news regarding the autoplay attribute for vimeo links ?
Should I maybe use youtube video instead ?

Have a great day :wink:


#5

Hi @anthonysalamin

Thanks so much for your patience.

It looks like you’re correct – the autoplay vimeo attributes appear to be stripped from the URL when used in the rich text field. This doesn’t appear to be expected behavior, and I’ve reported it to the team so we can investigate further.

That said, I found a workaround you can use to achieve this design - here is a video showing these steps.

Hope this workaround helps!


#6

Hi Brando,

Thank you for your time and short video once again !
I love dynamic embeds, really cool stuff !
I tried and it helped a bit, but I now have a video for every project of my portfolio.
I thought of using a display=“none” into the embed code but I don’t know how to implement it correctely.
I guess I’ll wait until the bug in the rich text field is resolved :slight_smile:

My new read only link
The issue with the new video without content on each page

EDIT: youtube video with autoplay options are working well ! would be awesome to have the same support with vimeo in the future :sunny: I’ll host my video on youtube for the moment.


#8

Hi @anthonysalamin

Thanks for letting me know. I’ll be sure to post back here with more information as soon as I can.

I tried and it helped a bit, but I now have a video for every project of my portfolio.

For this you can nest the embed inside a div:
image

Then give the parent div a conditional visibility based on that switch:
28%20PM

This will effectively hide all the embeds with that switch disabled.

Orrr you could use a youtube video :smile: probably much simpler at this point.


#9

Totaly awesome !
Thank you @Brando, it works now !

I’ve also did some research and added a little more code to the embed so that the video is responsive !

<style>

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0; overflow: hidden;
  max-width: 100%; height: auto;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

</style>

<div class='embed-container'>

<iframe src='https://player.vimeo.com/video/12345?autoplay=1&loop=1&autopause=0"
frameborder='0'webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>

</div>

:sunglasses::star_struck:


#10

Awesome @anthonysalamin! I’ll definitely be referencing this code in the future – thanks for sharing :smile: :bowing_man:


#11

I’ve been having problems with vimeo videos displaying in firefox and discovered through Brando that it may be a bug.

He sent me to this thread to see if your custom code fixes my problem. For the life of me I just can’t get it to work. The videos never display. I manually entered the code into downloaded zips of my site and also just tried to use it directly in webflow.

Can anyone take a quick look at my site and see if I’m doing something wrong.

The page with the custom code is ‘Terminal and Departures’ page. it has a regular video widget (doesn’t display in Firefox or Edge Mac/PC) and also the Embed code. I’ve added the custom CSS to the custom code field.

https://preview.webflow.com/preview/heinemann-cruise-webfont-2?preview=eb679cfb09b1d7edfb59bff2a50e179a


#12

Hi @CiRDesign,

I tried to preview your page and it seems to me the custom code video is working great in firefox. I just had to click on the play button though but it works.

Your code:

<iframe src="https://player.vimeo.com/video/258815328" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Now, on my project, based on Brando’s idea, I set up my video to play automatically and here is the entire custom code I used:

<style>
.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0; overflow: hidden;
	max-width: 100%; height: auto;
	}
.embed-container iframe,
.embed-container object,
.embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
</style>
<div class='embed-container'>
	<iframe src="https://player.vimeo.com/video/123456789?autoplay=1&loop=1&autopause=0"
		frameborder="0"
		webkitallowfullscreen mozallowfullscreen allowfullscreen>
	</iframe>
</div>

#13

Thanks for quick reply. Weird. I see this in firefox:

I don’t want my video to autoplay, but thanks for sharing code.

I don’t know where to go from here. I’ve spent a load of time trying to debug this and you seeing a different page to what I’m seeing just compounds the issue. But thanks anyway.


#14

Could you send me the link of your page, the page you’re looking at is the published one. The one I’m looking at is the one from the webflow preview module.


#15

http://heinemann-cruise-webfont-2.webflow.io/the-cruise/terminal-departure

I just opened designer in firefox (Mac) and webflow warns that browser not supported, but when I view preview I see the same as you – the small video. weird.

Thanks.


#16

what about you wrap your video in a div which you’d then style to display the way you like it ?

Something similar to what i did:

<div class='xxx'>
	<iframe src="https://player.vimeo.com/video/xxxxxx
		frameborder="0"
		webkitallowfullscreen mozallowfullscreen allowfullscreen>
	</iframe>
</div>

PS: I get the same warning message when opening webflow in firefox. I always use chrome browser to develop with webflow.


#17

I don’t understand. I’m using your embed-container class. I thought the whole point of using your code was to make responsive an unresponsive vimeo embedded video. I used your embed-container class and then referenced that in the CSS. Why would I want to style that DIV differently? I thought the embed-container class was what enabled an unresponsive vimeo embedded video to be responsive. Am I not understanding some fundamentals here?


#18

ho, so you did use my code with the div.
well that is weird if the video doesn’t show up then, it works fine on my website.


#19

Yes. Did you hand-code it into exported files or do it all using the webflow interface?


#20

I did everything within Webflow interface.


#21

OK. Putting your CSS into the custom code head field in the project settings?