Edit on GitHub
Jump to docs navigation

Field Types / Embed field

Note: You are currently reading the documentation for Bolt 4.0. Looking for the documentation for Bolt 3.7 instead?

A generic built-in embed client, to facilitate embedding from different sources like YouTube, Vimeo, SoundCloud, Twitter, Issuu or any other kind of media provider that supports the OEmbed standard.

Basic Configuration:

        embedded:
            type: embed

Example usage in templates:

To insert the HTML for the embed:

{{ record.embedded.html|raw }}

Additionally, the following properties are available:

{{ record.embedded.url }}
{{ record.embedded.width }}
{{ record.embedded.height }}
{{ record.embedded.title }}
{{ record.embedded.authorname }}
{{ record.embedded.authorurl }}
{{ record.embedded.thumbnail }}
{{ record.embedded.responsive }}
{{ record.embedded.responsive_inline }}

Default value

The embed field can contain a default value, which you can set using the default: option like so:

        embedded:
            type: embed
            default:
                url: "https://www.youtube.com/embed/sRrqF8eXs38"
                width: "480"
                height: "270"

## Responsive options

An embed field can be set to responsive, thereby ignoring the `width` and `height` options. Bolt provides two responsive options.

### Responsive by class

```twig
{{ record.embedded.responsive|html }}

The example above will render the embedded iframe wrapped around a container parent as follows:

<div class="embed-responsive">
    <iframe ... />
</div>

You can use this class to apply the responsive styling in css as you see fit.

Responsive by inline styles

Alternatively, the responsive_inline value can be used to render a responsive embedded field, without any custom CSS required.

{{ record.embedded.responsive_inline|raw }}

will render the following:

<div style="overflow: hidden; padding-bottom: 56.25%; position: relative; height: 0;">
    <iframe style="left: 0; top: 0; height: 100%; width: 100%; position: absolute;" ... />
</div>


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.