Embed

Embed anything from anywhere such as videos, slides, forms and more

Embed fragment can either embed a media source url such as youtube videos or set custom iframe html code.

Embed with url
Embed with source

Embed Fragment

Easily embed media (videos, iframes etc.)

Code

+++
fragment = "embed"
#disabled = false
date = "2017-09-09"
weight = 110
background = "secondary"

title = "Embed Fragment"
subtitle = "Easily embed media (videos, iframes etc.)"
#title_align = "left" # Default is center, can be left, right or center

media_source = "https://www.youtube-nocookie.com/embed/lXpf4kIxygU?rel=0&amp;showinfo=0"
#media = '<iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/lXpf4kIxygU?rel=0&amp;showinfo=0" allowfullscreen></iframe>'
#ratio = "16by9" # 21by9, 16by9, 4by3, 1by1 - Default: 4by3
#size = "100" # 25, 50, 75, 100 (percentage) - default: 75
+++

Code

+++
fragment = "embed"
#disabled = true
date = "2017-10-07"
weight = 120
background = "secondary"

#title = ""
#subtitle = ""
#title_align = "left" # Default is center, can be left, right or center

# Embed a form via an iframe
# Mailerlite is one example of a working provider.
# There are others such as convertkit.
# Only necessity is for them to use iframes.
media = '<iframe src="https://landing.mailerlite.com/webforms/landing/m0h9d7" style="border: none; width: 100%; height: 178px;"></iframe>'
responsive = false # prevent responsive behaviour
#size = "100" # 25, 50, 75, 100 (percentage) - default: 75
+++

Documentation

Variables

media

type: string

URL to embed in the fragment. Any value would override media_source.

media_source

type: string

Custom HTML code for your iframe or embed objects.

If media is set, this value would not be used.

responsive

type: boolean
default: true

Make the embed object or iframe responsive. It can be customized with help of the ratio variable.
Using responsive any size variable would be overridden.

ratio

type: string
accepted values: 21by9, 16by9, 4by3, 1by1
default: 4by3

If responsive is set to false, this value would be ignored.

size

type: number
default: 75

Percentage value to force embed object or iframe to be a specific width of its parent.

If responsive is set to true then this value would be ignored.

Global variables are documented as well and have been omitted from this page.

Further Resources

Syna Theme

Highly customizable open source theme for Hugo based static websites