Youtube Background Video

You can now add Youtube Video as Background Sections similar to the HTML5 Video Sections.

Code Example

<div class="section yt-bg-player nomargin dark" data-quality="hd1080" data-start="20" data-stop="40" data-video="http://youtu.be/A3PDXmYoF5U" style="height: 600px;">
	<div class="container clearfix">

		...

	</div>
</div>

Settings

Setting Description
data-video

The Youtube Video URL, Short URL available from the Youtube Share Panel or the Video ID.

Option(s): https://www.youtube.com/watch?v=A3PDXmYoF5U or https://youtu.be/A3PDXmYoF5U or A3PDXmYoF5U

Ex: data-video="https://youtu.be/A3PDXmYoF5U"
data-mute

Mutes the Audio on the Youtube Video

Option(s): true or false

Ex: data-mute="true"
data-ratio

Aspect Ratio of the Youtube Video

Option(s): 4/3, 16/9 or auto
data-quality

Quality of the Youtube Video

Option(s): default, small, medium, large, hd720, hd1080, highres

Ex: data-quality="hd1080"
data-opacity

Opacity of the Youtube Video

Option(s): 0 to 1

Ex: data-opacity="0.5"
data-container

CSS selector of the DOM element where you want the Youtube Video background, if not specified it takes the "self"

Option(s): self or body

Ex: data-container="body"
data-optimize

Setting this Option will fit the Youtube Video size into the window size optimizing the view.

Option(s): true or false
data-loop

Loops the Youtube Video

Option(s): true or false
data-volume

Sets the Volume of the Youtube Video

Option(s): 1 to 100

Ex: data-volume="60"
data-start

Set the seconds the video should start from.

Ex: Setting data-start="20" will start the Video from 20 Seconds.
data-stop

Set the seconds the video should stop at.

Ex: Setting data-stop="40" will start the Video at 40 Seconds.
data-autoplay

AutoPlays the Youtube Video

Option(s): true or false
data-fullscreen

Activate the new HTML5 full screen behavior.

Option(s): true or false

Last Modified: December 15, 2019

Need Help?