To Top

### Credits

- Photos by:
  - Katya Alagich, CC BY 2.0 License
  - Jim Lukach, CC BY 2.0 License
  - Johan Larsson, CC BY 2.0 License
  - John Kraus, CC BY 2.0 License
  - THOR, CC BY 2.0 License
  - stephane, CC BY 2.0 License
  - Pexels, CC0 License
  - Stocksnap, CC0 License
  - Picjumbo, Picjumbo License
- Video by:
  - Mazwai, CC BY 3.0 License
- Icons by:
  - Designmodoh, License

## Video Backgrounds

Skrollex Documentation

### YouTube Video

#### Source

    <!-- Source: https://www.youtube.com/watch?v=vog0_BSW6KA -->
    <div class="youtube-bg" data-video="vog0_BSW6KA" data-mute="yes" 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

### Vimeo Video

#### Source

    <!-- Source: https://vimeo.com/75124475 -->
    <div class="vimeo-bg" data-video="75124475" 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="https://themes.x40.ru/templates/video/Mazwai/Phil_Fried-ElectricBulb.mp4" 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