All The Latest Blog
Documentation Help
Awesome How We Work
We Are Designers Who We Are
Some Facts Our Numbers
To Top

Credits

Video Backgrounds

VulturDev Documentation

YouTube Video

Source

<!-- Source: http://www.youtube.com/watch?v=2zLQI4Dfi_w -->
<div class="youtube-bg" data-video="2zLQI4Dfi_w" data-mute="yes" data-volume="50" data-alternative="images/placeholders/1920x1200img4.jpg"></div>
<section id="sec1">
	<div class="view">
		<div class="content colors-c background-20 full-size">
			<h3>Section 1 View</h3>
		</div>
	</div>
	<div class="view">
		<img alt class="bg" src="images/placeholders/1920x1200img1.jpg"/>
		<img alt class="bg" src="images/placeholders/1920x1200img2.jpg"/>
		<div class="content colors-f">
			<h3>Section 1 View</h3>
		</div>
	</div>
</section>
<section id="sec2">
	<div class="view">
		<div class="content colors-d">
			<h3>Section 2 View</h3>
		</div>
	</div>
	<div class="view">
		<img alt class="bg" src="images/placeholders/1920x1200img3.jpg"/>
		<img alt class="bg" src="images/placeholders/1920x1200img4.jpg"/>
		<div class="content colors-e">
			<h3>Section 2 View</h3>
		</div>
	</div>
	<div class="view">
		<div class="content colors-c">
			<h3>Section 2 View</h3>
		</div>
	</div>
</section>

Result

Show

Vimeo Video

Source

<!-- Source: https://vimeo.com/75124475 -->
<div class="vimeo-bg" data-video="75124475" data-volume="0" data-alternative="images/placeholders/1920x1200img4.jpg"></div>
<section id="sec1">
	<div class="view">
		<div class="content colors-c background-20 full-size">
			<h3>Section 1 View</h3>
		</div>
	</div>
	<div class="view">
		<img alt class="bg" src="images/placeholders/1920x1200img1.jpg"/>
		<img alt class="bg" src="images/placeholders/1920x1200img2.jpg"/>
		<div class="content colors-f">
			<h3>Section 1 View</h3>
		</div>
	</div>
</section>
<section id="sec2">
	<div class="view">
		<div class="content colors-d">
			<h3>Section 2 View</h3>
		</div>
	</div>
	<div class="view">
		<img alt class="bg" src="images/placeholders/1920x1200img3.jpg"/>
		<img alt class="bg" src="images/placeholders/1920x1200img4.jpg"/>
		<div class="content colors-e">
			<h3>Section 2 View</h3>
		</div>
	</div>
	<div class="view">
		<div class="content colors-c">
			<h3>Section 2 View</h3>
		</div>
	</div>
</section>

Result

Show

Local Video File

Source

<!-- Source: Local File -->
<div class="video-bg" data-video="http://www.x40.ru/templates/video/Mazwai/Phil_Fried-ElectricBulb.mp4" data-mute="yes" data-volume="50" data-alternative="images/placeholders/1920x1200img4.jpg"></div>
<section id="sec1">
	<div class="view">
		<div class="content colors-c background-20 full-size">
			<h3>Section 1 View</h3>
		</div>
	</div>
	<div class="view">
		<img alt class="bg" src="images/placeholders/1920x1200img1.jpg"/>
		<img alt class="bg" src="images/placeholders/1920x1200img2.jpg"/>
		<div class="content colors-f">
			<h3>Section 1 View</h3>
		</div>
	</div>
</section>
<section id="sec2">
	<div class="view">
		<div class="content colors-d">
			<h3>Section 2 View</h3>
		</div>
	</div>
	<div class="view">
		<img alt class="bg" src="images/placeholders/1920x1200img3.jpg"/>
		<img alt class="bg" src="images/placeholders/1920x1200img4.jpg"/>
		<div class="content colors-e">
			<h3>Section 2 View</h3>
		</div>
	</div>
	<div class="view">
		<div class="content colors-c">
			<h3>Section 2 View</h3>
		</div>
	</div>
</section>

Result

Show
Table of contents Next: Elements