Lava Shortcode - YouTube

Description

Embed a responsive YouTube video using only the video ID.

Documentation

Embedding a YouTube video is easy, right? Well what if you want it to be responsive (adjust with the size of the window)? Or what about control of what is shown in the player? The YouTube shortcode helps to shorten (see what we did there) the time it takes to get a video up on your Rock site. Here’s how:

Basic Usage:

{[ youtube id:'8kpHK4YIwY4' autoplay:'true' muted:'true' ]}

This example code will put the video with the provided id onto your page in a responsive container, it will automatically start your video, and it will mute the video so that autoplay will work properly in the browser. The id can be found in the address of the YouTube video. There are also a couple of options for you to add:

• id (required) – The YouTube id of the video.
• width (100%) – The width you would like the video to be. By default it will be 100% but you can provide any width in percentages, pixels, or any other valid CSS unit of measure.
• muted (false) – This determines if the video should be muted or not. This option is required for autoplay to work. 
• controls (true) – This determines if the standard YouTube controls should be shown.
• autoplay (false) – This option will play the specified video upon page load. For autoplay to work, the muted option must be declared and set to true.

Markup

{% assign wrapperId = uniqueid %}

{% assign parts = id | Split:'/' %}
{% assign id = parts | Last %}
{% assign parts = id | Split:'=' %}
{% assign id = parts | Last | Trim %}

{% assign url = 'https://www.youtube.com/embed/' | Append:id | Append:'?rel=0' %}

{% assign controls = controls | AsBoolean %}
{% assign autoplay = autoplay | AsBoolean %}
{% assign muted = muted | AsBoolean %}

{% if controls %}
    {% assign url = url | Append:'&controls=1' %}
{% else %}
    {% assign url = url | Append:'&controls=0' %}
{% endif %}

{% if autoplay %}
    {% assign url = url | Append:'&autoplay=1' %}
{% else %}
    {% assign url = url | Append:'&autoplay=0' %}
{% endif %}

{% if muted %}
    {% assign url = url | Append:'&mute=1' %}
{% else %}
    {% assign url = url | Append:'&mute=0' %}
{% endif %}

<style>
#{{ wrapperId }} {
    width: {{ width }};
}

.embed-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
    max-width: 100%; 
} 
.embed-container iframe, 
.embed-container object, 
.embed-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}
</style>

<div id='{{ wrapperId }}'>
    <div class='embed-container'><iframe src='{{ url }}' frameborder='0' allowfullscreen></iframe></div>
</div>