Youtube Webflow Videos

This feature improves load time by waiting until the user has scrolled to the video before loading the iframe. It does this by loading the video from this page via ajax. As of ~2020, this method works with Googlebot because it renders ajax on scroll.

How to use: 

1- Append a Webflow Video to the body of this page.

2- Give the video an #ID.

3- Create this div where you want the video:

<div
class="dyn-video"
video_page="/yt-vids #MY_ID"
></div>

Example:

Class: dyn-video

Append video to this page and give it an ID

Class: dyn-video

On the page you want the video to load, make anew div with class: dyn-video

Attribute 1: video_page

Add a custom attribute and enter the path to this this page, followed by the ID of your video.

Make sure there is a space between the path and the ID

Pro Tip: To adjust video size, adjust parent elements only. Do not modify the dyn-video class.

Full example:

 
 
 
 
Append Videos to the body below