For the video version of Phantom, you can display a playable YouTube video as the background.

Adding a YouTube Video

You can add a YouTube video as the background by the following these instructions:

1. Copy the URL of the YouTube video you want to display as the background.
2. Open the video version of the index.html file in your code editor.
3. Search for the following class name: video-container
4. Search for the data-property attribute and insert the URL into videoURL:’ ‘. Make sure the URL is contained within single quotation marks.
5. Save the index.html file and upload it to your host’s server to view the changes.

The YouTube video will not play locally on your hard drive. You must upload it to your web host’s server to play the video.

Here is the code which you need to modify to add a new video background:

<a id="video" class="fullscreen-video" data-property="{videoURL:'https://www.youtube.com/url'}"></a>

Changing the Before/After Video Images

Phantom displays before and after background images for the video version. Prior to playing the video, the before image displays. After the video finishes, the after image displays. To change the before and after background images, follow these instructions:

1. Open the video version of the index.html file in your code editor.
2. Search for the following class names: img-before and img-after
3. Search for the style attribute and type the directory/file path for the image in the parenthesis of background-image: url(‘ ‘).
4. Save the index.html file and view the changes in your web browser.

Here is the code which you need to modify to add new before/after video images:

<!-- BEGIN .img-before -->
<div style="background-image: url('include/images/before-image.jpg');" class="img-fullscreen img-before"></div>
<!-- END .img-before -->

<!-- BEGIN .img-after -->
<div style="background-image: url('include/images/after-image.jpg');" class="img-fullscreen img-before"></div>
<!-- END .img-after -->