I am encountering an issue with my banner video when trying to make it stretch at 100% of the width. It seems to work perfectly on Firefox, but not on Chrome. To see an example, visit . Despite using code snippets and attempting to address compatibility issues, I cannot seem to get it to function properly. The best way to illustrate this problem is through the link itself.
Special thanks to @Mav for providing a visual example! Please refer to the images below:
Firefox
https://i.sstatic.net/61fE0.png
Chrome
https://i.sstatic.net/595bc.png
Below is the snippet of my code:
<!-- Main Layout Content -->
<md-content md-colors="accent">
<!-- Tabs Layout -->
<md-tabs md-selected="ctrl.tabSelected" md-stretch-tabs="always" class="md-primary" md-dynamic-height md-border-bottom>
<!-- Home Tab -->
<md-tab>
<!-- Home Tab Label -->
<md-tab-label>
<h2>
<md-icon md-svg-src="media/image/icon/home.svg"></md-icon>
<span hide show-gt-sm>
Home
</span>
</h2>
</md-tab-label>
<!-- Home Tab Body -->
<md-tab-body>
<!-- Home Tab Banner -->
<div layout="column" layout-align="start center" style="overflow-y: hidden; max-height: 275px; text-align: center; background-color: #000;">
<div id="banner-title" style="position: absolute;">
<img src="media/image/icon/logo-white-192x192.png" alt="GustDive Logo" />
<span hide show-gt-xs>
<br />
<h1 style="font-size: 50px; color: white; text-shadow: 0 0 10px white; letter-spacing: 15px;" flex>
GustDive
</h1>
</span>
</div>
<video loop muted autoplay style="width: 100%;">
<source src="media/video/underwater-720p.mp4" type="video/mp4">
<source src="media/video/underwater-360p.mp4" media="(max-width: 640px)" type="video/mp4">
</video>
</div>
<!-- Home Tab Content -->
<md-content layout="row" layout-xs="column" layout-wrap>
</md-content>
</md-tab-body>
</md-tab>
</md-tabs>
<!-- Website Footer -->
<div md-colors="{background: 'grey-A200'}" layout-padding>
<div layout="row" layout-align="end center">
<a target="_blank" href="https://www.padi.com" aria-label="Padi">
<img src="media/image/icon/padi.png" alt="Padi" />
</a>
<a target="_blank" href="https://www.tripadvisor.com/Attraction_Review-g150793-d11888983-Reviews-GustDive-Puerto_Vallarta.html" aria-label="Trip Advisor">
<img src="media/image/icon/trip-advisor.png" alt="Trip Advisor" />
</a>
</div>
<div layout-align="center end" style="font-size: 12px; text-align: center;">Copyright © Jonathan-Gagne.com 2018</div>
</div>
</md-content>