1. Home
  2. Marco HTML
  3. Homepage
  4. Video

Video

MarcoTheme uses YouTube jQuery plugin (jquery.mb.YTPlayer) to appear video as background image on Home3 (home3.html). To add own video, replace video url in home3.html file. Also you can change video settings listed below.


Structure

Home with video background structured with mobile view and desktop view. Used plugin doesn’t work as background for devices so you should add image url which appear on mobile version.
 

 
...
    Mobile view - image url
   <div class="video-mobile-wrapper" style="background-image: url('assets/img/s1.jpg')"></div>

    Desktop view - video url
   <div class="video-wrapper show-for-large" data-property="{videoURL:'http://www.youtube.com/watch?v=NjqOc8k5kjc',containment:'.video-wrapper',autoPlay:true, quality:'default', mute:true, startAt:3, opacity:1, showControls: false}"></div>
     ...
     Video controls
   <div class="home-video-controls show-for-large home-bottom home-right">
   <a href="#" class="link-hover link-hover-text video-toggle" data-pause="pause" data-play="play">pause</a> / <a href="#" class="link-hover link-hover-text video-mute-toggle" data-mute="mute" data-unmute="unmute">unmute</a>
					</div>
...

Settings

If you want to turn on video autoplay or mute replace “autoPlay“/”mute” setting on boolean expression true. Also you can change video quality, simply replace “quality” setting. To change start at playing video, replace number (seconds) in “startAt” setting.
 

 
...
   <div class="video-wrapper show-for-large" data-property="{videoURL:'http://www.youtube.com/watch?v=NjqOc8k5kjc',containment:'.video-wrapper',autoPlay:true, quality:'default', mute:true, startAt:3, opacity:1, showControls: false}"></div>
...
Was this article helpful to you? Yes 1 No