e107sk.com

Masthead plugin - how to use it for video header

on Monday 18 May 2020
comments: 0

Testing for the sass landing page in mdbootstrap free templates (I can't find link to online demo, but it is part of free templates by mdbootstrap)

Just use any free text field for video URL and use its shortcode in the template.

Used video from LZ2 theme.

 $MASTHEAD_TEMPLATE['mdbootstrap']['element'] = '
<!-- Full Page Intro -->
<div class="view full-page-intro">
<!--Video source-->
<video class="video-intro" autoplay loop muted>
<source src="{BUTTON_LINK}" type="video/mp4" />
</video>
<!-- Mask & flexbox options-->
<div class="mask rgba-blue-light d-flex justify-content-center align-items-center">
<!-- Content -->
<div class="container">
<!--Grid row-->
<div class="row d-flex h-100 justify-content-center align-items-center wow fadeIn">
<!--Grid column-->
<div class="col-md-6 mb-4 white-text text-center text-md-left">
<h1 class="display-4 font-weight-bold">{MASTHEAD_HEADING}</h1>
<hr class="hr-light">
<p>
<strong>{MASTHEAD_SUBHEADING}</strong>
</p>
<p class="mb-4 d-none d-md-block">
<strong>{MASTHEAD_INTRO}</strong>
</p>
<a target="_blank" href="{BUTTON_LINK_LEFT}" class="btn btn-outline-white">{BUTTON_TEXT_LEFT}
<i class="fas fa-graduation-cap ml-2"></i>
</a>
<a target="_blank" href="{BUTTON_LINK_RIGHT}" class="btn btn-outline-white">{BUTTON_TEXT_RIGHT}
<i class="fas fa-download ml-2"></i>
</a>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6 col-xl-5 mb-4">
<img src="{IMAGE_01}" alt="{MASTHEAD_HEADING}" class="img-fluid">
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Content -->
</div>
<!-- Mask & flexbox options-->
</div>
<!-- Full Page Intro -->
</header>
';

3f46d7f3e0eb

0 Comments

Other links

Follow us