[contact-form-7 id="24078" title="Feedback EN"]

Featured templates

Magento. How to manage background video

This tutorial will show you how to manage Background Video in your Magento template.

Magento. How to manage background video

  1. Access your Magento admin panel, navigate to CMS > Static Blocks.

  2. Open the block called ‘Additional info’ (the name of the block may differ in your template. E.g: ‘Additional info 2’):

    Magento_How_to_manage_Background_Video_1

  3. You will see the following code in the ‘Content’ box:

    Magento_How_to_manage_Background_Video_2

    		<div class="additional-info-2">
    			<div id="bgndVideo" data-property="{videoURL:'//youtu.be/z83L-twjEnI', containment:'#bgndVideo', autoPlay:true, mute:true, opacity:1, loop:true, showControls:false, quality:'medium', startAt:0, mute:'true', stopMovieOnBlur:false, addRaster:true}"></div>
    			<div class="container">
    			<h3>Helping People</h3>
    			<span>Find Their Way Back to God</span>
    			<a href="{{store url='icons.html'}}">Learn More</a>
    			</div>
    		</div>

    Let’s emphasize basic parameters for the data-property attribute:

    Magento_How_to_manage_Background_Video_3

    • videoURL– is a link for the video you want to display as a background one;

    • quality – defines video quality (‘default’ or “small”, “medium”, “large”, “hd720”, “hd1080”, “highres”);

    • containment – by default “self” is used to indicate block which will contain video, if it is initialized in script;
    • opacity – adjusts video transparency by values from ‘0’ to ‘1’;

    • loop – enables/disables video replay (true/false);

    • showControls – enables the controls display;

    • mute – is a sound cancellation;

    • startAt – determines the second from which the video will start;

    • stopAt – determines the second on which the video will stop;

    • autoplay – enables video autoplay.

  4. To change the background video, you will need to change the link for ‘videoURL’ attribute. E.g:

    videoURL:'https://www.youtube.com/watch?v=Iubkrzgp03s'

This is the end of the tutorial. Now you know how to manage Background Video in your Magento template.

Feel free to check the detailed video tutorial below:

Magento. How to manage background video