Streaming live at 10am (PST)

Autoplay YouTube video from CMS?


#1

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.


#2

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:

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.

Select the ID part:

Then go link it to the Video ID field:

The add this piece of code after the ID and before the closing " sign

`?rel=0&modestbranding=1&autohide=1&mute=1&showinfo=0&controls=0&autoplay=1``

Now it works, even inside of the designer.


#3

Great!! Thanks @vincent :smiley:

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 :thinking:


#4

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.


#5

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 :thinking: 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”


#6

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.


#7

@Sitron_Systems Yes!! the FitVids script looks like what I need! Hum, any pointers on Webflow implementation?


#8

Fiddle with it and you will find :slight_smile: Try this way before using a JS library, that’s sad to add complexity to smething that can work with HTML and CSS :smiley: (maybe only sad for me, it’s like a sport :smiley: )


#9

@vincent Definitely nicer with less complexity! :slight_smile: 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 :wink:


#10

Like @vincent thier is more solutions.

Anyway by FitVids

1

include assets (before body) under collection page (Webflow already include jquery)

image

<!-- 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).


#11

Thanks for your time and help @Siton_Systems :slight_smile:


#12

Thanks for that because I’m gonna use it on a site of mine.