Preserve, Enrich, Inspire

Responsive Video Embeds

Home/Shortcodes/Responsive Video Embeds
[raw]

The [video] shortcode lets you insert a video embed that automatically resizes to fill its parent container. The idea is that you can add a video to a page and have it display correctly on all devices – desktop, tablet and mobile. Resize the window and watch as the video embeds below resize correctly. You can also click it to launch lightbox.

[spacer height=”1px”] [spacer height=”24px”] [spacer height=”40px”] [divider] [spacer height=”24px”] [/raw]
[raw]

Get The Code

[spacer height=”4px”] [codebox line_numbers=”true” remove_breaks=”true” lang=”html”] [video src="https://youtu.be/Co0tTeuUVhU" width="300" height="200"]

[video src="https://vimeo.com/20148191" width="300" height="200"] [/codebox] [spacer height=”23px”] [divider] [spacer height=”24px”] [/raw]

[raw]

Customization Options

[list] [list_item]src – the URL of the video you want to embed[/list_item] [list_item]width – the width and height will be used to maintain the aspect ratio of the video as it is resized[/list_item] [list_item]height – the width and height will be used to maintain the aspect ratio of the video as it is resized[/list_item] [list_item]autoresize – whether or not you want the responsive autoresize to run[/list_item] [list_item]autoplay – whether to start playing the video as soon as the page is loaded[/list_item] [/list] [/raw]
Print Friendly, PDF & Email