WebFlow - Helping Zapier work with Video fields in the WebFlow CMS

WebFlow's CMS supports video fields, however there are currently [ Nov 2018 ] two key limitations;

1. The designer offers very limited Embed configuration to CMS-bound Video elements. In particular, you cannot control settings such as start position, end position, or whether a competitor's related videos are shown at the end of your video.
2. The video field cannot be updated through the API, which includes Zapier integrations. This means that automating CMS data feeds that contain videos is not possible when you use CMS Video fields.

Fortunately, there is a way around both of these limitations.

Using Zapier

Note that if you are using Zapier, you want to...

1. Create a CMS text field to store the YouTube ID
2. Configure your Zapier zap to populate that field with the "raw video id"

HTML

To make your embed responsive, maximizing video width while preserving the aspect ratio, we've used the technique in this article...

Example HTML construction;

<div class="container">

<iframe src="//www.youtube.com/embed/yCOY82UdFrw"

frameborder="0" allowfullscreen class="video"></iframe>

</div>

‍

And CSS;

.container {

   position: relative;

   width: 100%;

   height: 0;

   padding-bottom: 56.25%;

}

.video {

   position: absolute;

   top: 0;

   left: 0;

   width: 100%;

   height: 100%;

}

‍

‍