Iframe Example

Local Video

Background Image

<!--
	image 
	the base64 is 1x1px transparent png image to keep the markup valid.
	can be replaced with other valid image, as a "preloader".
-->
<img class="lazy bg-light bg-cover w-100" 
	data-lazy-toggle-class="animate-fadein" 
    data-src="demo.files/images/unsplash/covers/room-7DzpP1IVo8Y-unsplash.jpg" 
    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" 
    alt="...">

<noscript><!-- used as a fallback, in case the client disabled javascript -->
    <img class="w-100" src="demo.files/images/unsplash/covers/room-7DzpP1IVo8Y-unsplash.jpg" alt="...">
</noscript>




<!-- responsive image, using srcset -->
<img class="lazy img-fluid" data-lazy-toggle-class="animate-fadein" 
	data-src="image.jpg" 
	data-srcset="image.jpg 800w, image-2x.jpg 1600w" 
	src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
	alt="...">

<noscript><!-- used as a fallback, in case the client disabled javascript -->
    <img class="w-100" src="image.jpg" srcset="image.jpg 800w, image-2x.jpg 1600w" alt="...">
</noscript>




<!-- iframe / youtube / vimeo  -->
<div class="embed-responsive embed-responsive-16by9">
    <iframe class="lazy" data-lazy-toggle-class="animate-fadein" width="560" height="315" data-src="https://www.youtube.com/embed/YXNk4gQCPSY" allowfullscreen data-index="1"></iframe>
</div>




<!-- 
	local video 
	Please keep in mind: working as expected but because video source has no 
			     src="...", markup is invalid according to W3
-->
<div class="embed-responsive embed-responsive-16by9">
    <video class="lazy" data-lazy-toggle-class="animate-fadein" width="560" height="315" controls loop muted>
        <source data-src="demo.files/video/hd0936.mp4" type="video/mp4">
        <source data-src="demo.files/video/hd0936.ogg" type="video/ogg">
    </video>
</div>




<!-- 
	background image 

	NOTE: Optional but recommended in production
		For mobile devices, you can add a second attribute:
		data-background-image-xs="..."

-->
<div class="lazy bg-dark overlay-dark overlay-opacity-5 d-flex align-items-center justify-content-center text-white" data-background-image="../../html_frontend/demo.files/images/unsplash/covers/room-_A_UV188rqk-unsplash.jpg">

	<!-- optional line lenses -->
	<div class="position-absolute absolute-full w-100 overflow-hidden">
		<img class="img-fluid" width="2000" height="2000" src="assets/images/masks/shape-line-lense.svg" alt="...">
	</div>

	<div class="text-center pt--180 pb--180">

		<h1 class="m-0">
			SMARTY REBORN
		</h1>

		<p>
			EXTRA LIGHTWEIGHT • FULLY SCALLABE • MODERN
		</p>

		<p class="mt-5 mb-0">
			<a href="#buy_now" class="btn btn-pill btn-warning transition-hover-top">
				Get <b>Smarty Reborn</b>
			</a>
		</p>

	</div>

</div>