Field Types / Video field
Note: You are currently reading the documentation for Bolt 3.7. 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:¶
teaser:
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.
Couldn't find what you were looking for? We are happy to help you in the forum, on Slack or on Github.