Edit on GitHub
Jump to docs navigation

Field types / Video

Note: You are currently reading the documentation for Bolt 2.2. Looking for the documentation for Bolt 5.2 instead?

A field for videos from external sources like youtube, vimeo and so on. Will also show a preview beside the field.

When using this field more information about the video is available. To see the values that are stored, use {{ dump(page.video) }}.

Basic Configuration:

            type: video

Example usage in templates:

To insert the <embed>-code for the video, use:

{{ record.teaser.html }}

There's also a special 'responsive' HTML snippet available for videos. To insert it, use the following, and add the required CSS to your stylesheet:

{{ record.teaser.responsive }}
 * Styles for 'responsive video embeds'
.responsive-video {
  height: 0; padding-top: 25px; padding-bottom: 67.5%; margin-bottom: 10px; position: relative; overflow: hidden;
.responsive-video.vimeo {
  padding-top: 0;
.responsive-video.widescreen {
  padding-bottom: 57.25%;
.responsive-video embed, .responsive-video iframe, .responsive-video object, .responsive-video video {
  top: 0; left: 0; width: 100%; height: 100%; position: absolute;
@media (max-width: 767px) {
  .responsive-video {
    padding-top: 0;

Edit this page on GitHub
Couldn't find what you were looking for? We are happy to help you in the forum, on Slack or on Github.