<!--UCPA Emergency Banner Alert-->
<div id="emergencyalert">
<div id="AppArmorAlertID_2"></div>
<script type="text/javascript" src="//lehigh.apparmor.com/Notifications/Feeds/Javascript/?AlertID=2" async></script>
</div>
<!--End UCPA Emergency Banner Alert-->
<header class="header">
<div class="container-fluid">
<div class="row logo-wrapper">
<button class="navbar-toggler main-button" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="far fa-bars icon-default"><span class="sr-only">Open menu</span></i><i class="fa fa-times icon-hover"><span class="sr-only"><span>Close menu</span></i></span>
</button>
<div class="logo">
<picture class="image lehigh-logo e11y-ok">
<a href="" class="logo__link">
<img class="web" src="" alt="Lehigh University logo" width="200" height="43" />
<span class="u-a11y-text">Go to homepage</span>
</a>
</picture>
</div><!-- end logo -->
<div class="mobile-search">
<button role="button" class="btn search_icon"><i class="far fa-search"></i><span class="sr-only">Open search bar</span></button>
</div><!-- end mobile-search -->
</div>
</div>
<div class="header-wrapper container-fluid empty-nav">
<div class="row">
<div class="col title">
<span class="site-title"><a href=""></a></span>
</div><!-- title -->
</div>
<div class="navigation-wrapper">
</div><!-- end navigation-wrapper -->
</div><!-- end header-wrapper -->
</header>
<main class="d-print-block accent-">
<a id="main-content" tabindex="-1"></a>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="content-top col-12 col-print-12 ">
<nav aria-label="breadcrumb">
<h2 id="system-breadcrumb" class="sr-only">Breadcrumb</h2>
<ol class="breadcrumb">
</ol>
</nav>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row justify-content-center">
<section class="main-content col-12 col-print-12">
<section class="homepage_hero ">
<div class="hero_text">
<h1>This is Page Heading</h1>
<p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</p>
<div class="hero-buttons">
<a href="#" class="btn btn-primary dark-grey" role="button">
<span class="button_text">Action Button</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</div><!-- end hero-buttons -->
</div><!-- end hero_text -->
<div class="hero_video">
<div id="video-section-wrapper">
<div id="video">
<video id="bgvid" autoplay loop muted playsinline>
<source src="/video/Gliding_Shot_2.mp4" type="video/mp4">
<img src="/img/video-fallback.jpg" />
</video>
<div class="video-controls">
<button id="pause-btn" aria-pressed="false">
<i class="fa fa-play"></i>
<i class="fa fa-pause"></i>
<span class="sr-only">Pause Video</span>
</button>
</div>
<div class="mobile-background"></div>
</div>
</div> <!-- video-section-wrapper -->
</div><!-- end hero_img -->
</section>
</section>
</div><!-- end row -->
</div><!-- end container-fluid -->
</main>
<section id="department_footer">
<!-- region for footer-center or footer-main -->
<footer class="footer-wrapper">
<!-- Single Block styled as department footer -->
<h2>Lehigh's New theme- clutch</h2>
<ul class="social-media">
</ul>
<ul class="contact-info">
</ul>
</footer>
</section>
<footer id="site_footer">
<div class="footer-wrapper">
<div class="logo" role="logo">
<picture class="image lehigh-logo e11y-ok">
<a href="" class="logo__link">
<img class="web" src="/img/lehigh-logo.svg" alt="Lehigh University logo" width="200" height="43" />
<span class="u-a11y-text">Go to homepage</span>
</a>
</picture>
</div><!-- end logo -->
<div class="lehigh-contact">
<address>27 Memorial Drive West<br />
Bethlehem, PA 18015, USA</address>
<span class="phone"><a href="tel:610-758-3000">610-758-3000</a></span>
</div>
<div class="copyright">
<p>© <script>
document.write(new Date().getFullYear());
</script> Lehigh University. <a href="https://www2.lehigh.edu/about/copyright">All Rights Reserved</a>.
<a href="https://www2.lehigh.edu/about/privacy-policy">Privacy</a>. <a href="https://www2.lehigh.edu/about/service-agreement">Terms of Use</a>
</p>
</div><!-- end copyright -->
<div class="common-links">
<ul>
<li><a href="https://www2.lehigh.edu/about/the-perch">The Perch</a></li>
<li><a href="https://www2.lehigh.edu/directory">Directory</a></li>
<li><a href="https://www2.lehigh.edu/map">Maps</a></li>
<li><a href="https://www2.lehigh.edu/about/contact-lehigh">Contact</a></li>
<li><a href="https://www2.lehigh.edu/emergency">Emergency Info</a></li>
<li><a href="https://accessibility.lehigh.edu/">Web Accessibility</a></li>
<li><a href="https://www2.lehigh.edu/about/mobile-apps">Lehigh Mobile Apps</a></li>
<li><a href="https://accounts.lehigh.edu/html/">Account</a></li>
<li><a href="https://www2.lehigh.edu/about/service-agreement">Terms of Use</a></li>
<li><a href="https://www2.lehigh.edu/about/privacy-policy">Privacy</a></li>
<li><a href="https://provost.lehigh.edu/higher-education-opportunity-act-disclosures">Higher Education Opportunity Act</a></li>
<li><a href="https://www2.lehigh.edu/diversity-inclusion-equity">Equitable Community</a></li>
<li><a href="https://eocc.lehigh.edu/lehigh-university-non-discrimination-statement-and-title-ix-notice-non-discrimination">Non-Discrimination</a></li>
<li><a href="https://flippingbook.lehigh.edu/AnnualSecurityReport/">Annual Security & Annual Fire Safety Report</a></li>
<li><a href="https://www2.lehigh.edu/about/report-a-concern">Report a Concern</a></li>
</ul>
</div><!-- end common-links -->
</div>
</footer>
{% extends '@base_layout' %}
{% block region_main %}
{% include "@hero_homepage_video" %}
{% endblock region_main %}
{% block footer %}
{% render "@footer_option_1" %}
{% endblock footer %}
{
"has_breadcrumbs": false,
"full_width": true,
"hero_video_src": "/video/Gliding_Shot_2.mp4",
"hero_video_fallback": "/img/video-fallback.jpg",
"hero_heading": "This is Page Heading",
"hero_text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>",
"buttons": {
"1": {
"text": "Action Button",
"url": "#",
"color": "dark-grey",
"audio_src": "/audio/old-spice-whistle-hq.mp3",
"sound": "old_spice"
}
}
}
This shows an example of a homepage that uses an ambient video.