I have a client that wants videos published to his Webflow site to autoplay. Unfortunately the new YouTube element does not support linking to a collection (vote for this in the wishlist here)
What is my options? Can I use a script to get the old video element to autoplay or can I embed in other ways?
Edit: This lets me embed and autoplay, but it starts autoplay on page load and not on scroll in to view. It does not autoplay on iPhone neither.
The following is a URL of a YT video. Highlighted is the ID of the video. You’re going to collect those ID and only use them. Create a TEXT field in your collection and you’ll paste those IDs in it:
http://vincent.polenordstudio.fr/snap/Webflow_-__Sandbox_2019-01-09_10-41-10.png
http://vincent.polenordstudio.fr/snap/Webflow_-__Sandbox_2019-01-09_10-40-38.png
Then on this video page, click on Share then Embed. You get a code that’s already autoplay.
Copy the code and go to your CMS Collection page or any page with a collection list. Drag a custom code element and paste the code in it.
http://vincent.polenordstudio.fr/snap/Webflow_-__Sandbox_2019-01-09_10-42-52.png
Select the ID part:
http://vincent.polenordstudio.fr/snap/Webflow_-__Sandbox_2019-01-09_10-43-13.png
Then go link it to the Video ID field:
http://vincent.polenordstudio.fr/snap/Webflow_-__Sandbox_2019-01-09_10-43-40.png
The add this piece of code after the ID and before the closing " sign
http://vincent.polenordstudio.fr/snap/Webflow_-__Sandbox_2019-01-09_10-47-48.png
`?rel=0&modestbranding=1&autohide=1&mute=1&showinfo=0&controls=0&autoplay=1``
Now it works, even inside of the designer.
http://vincent.polenordstudio.fr/snap/Webflow_-__Sandbox_2019-01-09_10-48-54.png
Great!! Thanks @vincent 
Follow up question: If I set the width to 100%, how can I set the height so that it matches the aspect ratio of the video?
Edit: Hm, iOS (only tested on iPhone) still do not allow autoplay 
That may be a mobile browser thing that you can’t control. Do you have any example of autoplay yt videos on mobile?
Using a neat CSS trick, one of the weirdest rule of CSS, you can craft containers and control their aspect ratio. I made a landing page that is explaining how to:
I calculated that for a 16/9th ratio, you need to use width:50% and padding-bottom:28.125% .
Edit: for autoplay on mobile, search on google, you may need JS.
Hm, yes, looks like its hard to get autoplay to work on mobile devices.
That aspect ratio trick was nifty! But I have a bit of trouble getting it to work with a embedded video since you have to set both width and height in code. If I set width 100% on the video I have to set a height too… height does not respond to percentage value Is it possible to make a script that set the height to 16/9 of the width used in the browser window?
In other words; if I use width=100% on the video element the actual width will vary from user to user based on their screen resolution. Is it possible to measure the actual width of the video in the browser window and the set the height to a percentage value based on this?
Something like: Height = “56% of actual width”
autoplay block by google chrome
For embed code video this is very good libary (responsive + 4700 github stars - only set the parent width or 100%):
http://fitvidsjs.com/
docs:
Write - If you need help with fitvidsjs & webflow.
@Sitron_Systems Yes!! the FitVids script looks like what I need! Hum, any pointers on Webflow implementation?
Fiddle with it and you will find 
Try this way before using a JS library, that’s sad to add complexity to smething that can work with HTML and CSS (maybe only sad for me, it’s like a sport )
@vincent Definitely nicer with less complexity! Got the FitVids script to work in combination with the CMS-system (no autoplay on mobile), so will have to do for now, already passed the deadline on this project 
Like @vincent thier is more solutions.
Anyway by FitVids
include assets (before body) under collection page (Webflow already include jquery)
<!-- fitvids.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.min.js"></script>
<!-- initialize fitvids.js -->
<script>
$(document).ready(function(){
// Target Your video providers - for example youtube (or viemo and so on)
$('iframe[src*="youtube"]').parent().fitVids();
});
</script>
Add embed html youtube code to your page.
This is the trick of the $jquery selector (select any iframe contain src with youtube)
https://api.jquery.com/attribute-contains-selector/
Viemo? change to $('iframe[src*="viemo"]') and so on.
Thats it. Done.
For other users. This trick is very usefull for blog posts with youtube player inside the main article (Added by client).
Thanks for that because I’m gonna use it on a site of mine.
Hello everyone
How would i loop the video? everything above is working great except at the end of the video the playlist opens.
Thank you so much in advance!!
@Michael_DeNardo If your using Vimeo I would have a lock at the Vimeo embed documentation. A lot of options there on what to show and not.
Hi Vincent, thanks for your explanation, written very exhaustively as always.
Unfortunately I don’t see the images for some reason.
Is this post of yours also available somewhere else?
Maybe on your Twitter?
Thank you for your commitment.
