UIkit 3 Header with HTML5 Video Background

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>

<div class="uk-position-relative uk-background-center-center uk-background-cover" style="background-image: url('https://uikitbase.com/library/Blurred Crowd of People Walking.jpg');" uk-height-viewport>
	<div class="uk-position-cover uk-cover-container">
		<video autoplay loop playsinline muted uk-cover>
			<source src="https://uikitbase.com/library/Blurred Crowd of People Walking.mp4" type="video/mp4">
		</video>
	</div>
	<div class="uk-position-cover" style="background-image: linear-gradient(to right top, rgba(195, 55, 100, 0.9), rgba(166, 42, 111, 0.9), rgba(130, 38, 117, 0.9), rgba(87, 38, 118, 0.9), rgba(29, 38, 113, 0.9));"></div>
	<nav class="uk-navbar-container uk-navbar-transparent uk-light">
		<div class="uk-container">
			<div uk-navbar>
				<div class="uk-navbar-left">
					<a href="#" class="uk-navbar-item uk-logo">
						<img src="https://uikitbase.com/library/logo-light.png" alt="Logo">
					</a>
				</div>
				<div class="uk-navbar-center">
					<ul class="uk-navbar-nav uk-visible@m">
						<li class="uk-active"><a href="#">Home</a></li>
						<li>
							<a href="#">Services</a>
							<div class="uk-navbar-dropdown">
								<ul class="uk-nav uk-navbar-dropdown-nav">
									<li><a href="#">Ocean freight forwarding</a></li>
									<li><a href="#">Customs house brokerage</a></li>
									<li><a href="#">Transportation & Distribution</a></li>
								</ul>
							</div>
						</li>
						<li><a href="#">News</a></li>
						<li><a href="#">About Us</a></li>
						<li><a href="#">Contacts</a></li>
					</ul>
				</div>
				<div class="uk-navbar-right">
					<ul class="uk-navbar-nav uk-visible@m">
						<li>
							<div class="uk-navbar-item">
								<a href="#" class="uk-button uk-button-small uk-button-default">Request a quote</a>
							</div>
						</li>
					</ul>
					<a href="#offcanvas-menu" class="uk-navbar-toggle uk-hidden@m" uk-navbar-toggle-icon uk-toggle></a>
				</div>
			</div>
		</div>
	</nav>
	<div class="uk-position-relative uk-container uk-container-small uk-flex uk-flex-middle" uk-height-viewport="offset-top: true">
		<div class="uk-section uk-section-regular uk-width-1-1 uk-light">
			<div class="uk-flex uk-text-center uk-flex-middle uk-flex-center">
				<div class="uk-width-1-1">
					<h1 class="uk-heading-small">WE PROVIDE HIGHEST QUALITY FREIGHT SERVICES</h1>
					<div class="uk-text-lead">With 60 years of experience, we have become one of the largest logistics and freight forwarding companies.</div>
					<div class="uk-margin-large-top">
						<p>
							<a href="#" class="uk-button uk-button-default uk-button-xlarge">View all services</a>
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- CSS -->

<!-- JS -->