Angular Bootstrap Embeds
Angular Embeds - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A newer
version is available for Bootstrap 5. We recommend migrating to the latest version of our
product -
Material Design for Bootstrap 5.
Go to docs v.5
Angular Bootstrap embeds is a utility which helps you insert video or slideshow in the page keeping width of the parent and scales on any device.
Rules are directly applied to <iframe>, <embed>, <video>, and
<object> elements; optionally use an explicit descendant class
.embed-responsive-item when you want to match the styling for other attributes.
Pro-Tip! You don’t need to include frameborder="0" in your
<iframe>s as we override that for you.
Example
Wrap any embed like an <iframe> in a parent element with .embed-responsive
and an aspect ratio. The .embed-responsive-item isn’t strictly required, but we encourage it.
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/vlDzYIIOYmM" allowfullscreen></iframe>
</div>
Aspect ratios
Aspect ratios can be customized with modifier classes.
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Bootstrap IFrame
Bootstrap IFrame is an HTML document which is embedded in another HTML doc on a web page. IFrames are used to insert content from another source.
With the Bootstrap integration, you can put the content of the IFrame inside modal to make it even more interactive and entertaining.
IFrames in Bootstrap are fully responsive components, adjusting accordingly to the screen size so there's no need to worry about the quality of your content.
Use examples:
- Video tutorial
- Promotional video presentation
- Google Maps in contact section
See the following examples to get a good grip at IFrames.
YouTube IFrame
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/v64KOxKVLVg" allowfullscreen></iframe>
</div>
Vimeo IFrame
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://player.vimeo.com/video/137857207" allowfullscreen></iframe>
</div>
Google maps
<!--Google map-->
<div id="map-container" class="z-depth-1-half" style="height: 500px"></div>
IFrame in modals MDB Pro component
<div class="text-center">
<button type="button" mdbBtn color="info" (click)="youtubeModal.show()">YouTube Modal</button>
<button type="button" mdbBtn color="default" (click)="vimeoModal.show()">Vimeo Modal</button>
<button type="button" mdbBtn color="secondary" (click)="mapsModal.show()">Google Maps Modal</button>
</div>
<div mdbModal #youtubeModal="mdbModal" class="modal fade" id="frameModalTop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<!--Content-->
<div class="modal-content">
<!--Body-->
<div class="modal-body mb-0 p-0">
<div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/A3PDXmYoF5U" allowfullscreen></iframe>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center flex-column flex-md-row">
<span class="mr-4">Spread the word!</span>
<a type="button" mdbBtn floating="true" size="sm" color="fb">
<mdb-icon fab icon="facebook-f"></mdb-icon>
</a>
<!--Twitter-->
<a type="button" mdbBtn floating="true" size="sm" color="tw">
<mdb-icon fab icon="twitter"></mdb-icon>
</a>
<!--Google +-->
<a type="button" mdbBtn floating="true" size="sm" color="gplus">
<mdb-icon fab icon="google-plus"></mdb-icon>
</a>
<!--Linkedin-->
<a type="button" mdbBtn floating="true" size="sm" color="ins">
<mdb-icon fab icon="linkedin-in"></mdb-icon>
</a>
<button type="button" mdbBtn outline="true" rounded="true" color="primary" class="ml-4" data-dismiss="modal">Close</button>
</div>
</div>
<!--/.Content-->
</div>
</div>
<div mdbModal #vimeoModal="mdbModal" class="modal fade" id="frameModalTop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<!--Content-->
<div class="modal-content">
<!--Body-->
<div class="modal-body mb-0 p-0">
<div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
<iframe class="embed-responsive-item" src="https://player.vimeo.com/video/115098447" allowfullscreen></iframe>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<span class="mr-4">Spread the word!</span>
<a type="button" mdbBtn floating="true" size="sm" color="fb">
<mdb-icon fab icon="facebook-f"></mdb-icon>
</a>
<!--Twitter-->
<a type="button" mdbBtn floating="true" size="sm" color="tw">
<mdb-icon fab icon="twitter"></mdb-icon>
</a>
<!--Google +-->
<a type="button" mdbBtn floating="true" size="sm" color="gplus">
<mdb-icon fab icon="google-plus"></mdb-icon>
</a>
<!--Linkedin-->
<a type="button" mdbBtn floating="true" size="sm" color="ins">
<mdb-icon fab icon="linkedin-in"></mdb-icon>
</a>
</div>
<button type="button" mdbBtn color="primary" outline="true" class="ml-4 waves-light" mdbWavesEffect
(click)="vimeoModal.hide()">Close</button>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: Name-->
<div mdbModal #mapsModal="mdbModal" class="modal fade" id="modalGM" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<!--Content-->
<div class="modal-content">
<!--Body-->
<div class="modal-body mb-0 p-0">
<!--Google map-->
<section style="margin-bottom: -8px;">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12104.098012014043!2d-73.93928024466057!3d40.673429060698986!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNowy+Jork%2C+Stany+Zjednoczone!5e0!3m2!1spl!2spl!4v1543830038534"
frameborder="0"
style="height: 500px; width: 100%; border:0"
allowfullscreen
></iframe>
</section>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<button type="button" mdbBtn color="primary">Save location
<mdb-icon fas icon="map-marked" class="ml-1"></mdb-icon>
</button>
<button type="button" mdbBtn color="primary" outline="true" data-dismiss="modal">Close
<mdb-icon fas icon="times" class="ml-1"></mdb-icon>
</button>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: Name-->
IFrame with shadows
.z-depth-1
.z-depth-1-half
.z-depth-2
.z-depth-3
.z-depth-4
.z-depth-5
.hoverable
<!--Grid row-->
<div class="row mb-5">
<!--Grid column-->
<div class="col-lg-4 col-md-12">
<p class="h5 mb-4">.z-depth-1</p>
<div class="embed-responsive embed-responsive-16by9 z-depth-1">
<iframe
class="embed-responsive-item"
src="https://www.youtube.com/embed/fa3Iczgh8Ok"
style="height: 101%"
allowfullscreen
></iframe>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6">
<p class="h5 mb-4">.z-depth-1-half</p>
<div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
<iframe
class="embed-responsive-item"
src="https://www.youtube.com/embed/fa3Iczgh8Ok"
style="height: 101%"
allowfullscreen
></iframe>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6">
<p class="h5 mb-4">.z-depth-2</p>
<div class="embed-responsive embed-responsive-16by9 z-depth-2">
<iframe
class="embed-responsive-item"
src="https://www.youtube.com/embed/fa3Iczgh8Ok"
style="height: 101%"
allowfullscreen
></iframe>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row mb-5">
<!--Grid column-->
<div class="col-lg-4 col-md-12">
<p class="h5 mb-4">.z-depth-3</p>
<div class="embed-responsive embed-responsive-16by9 z-depth-3">
<iframe
class="embed-responsive-item"
src="https://www.youtube.com/embed/fa3Iczgh8Ok"
allowfullscreen
></iframe>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6">
<p class="h5 mb-4">.z-depth-4</p>
<div class="embed-responsive embed-responsive-16by9 z-depth-4">
<iframe
class="embed-responsive-item"
src="https://www.youtube.com/embed/fa3Iczgh8Ok"
allowfullscreen
></iframe>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6">
<p class="h5 mb-4">.z-depth-5</p>
<div class="embed-responsive embed-responsive-16by9 z-depth-5">
<iframe
class="embed-responsive-item"
src="https://www.youtube.com/embed/fa3Iczgh8Ok"
allowfullscreen
></iframe>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row d-flex justify-content-center">
<!--Grid column-->
<div class="col-md-6">
<p class="h5 mb-4">.hoverable</p>
<div class="embed-responsive embed-responsive-16by9 hoverable">
<iframe
class="embed-responsive-item"
src="https://www.youtube.com/embed/fa3Iczgh8Ok"
style="height: 101%"
allowfullscreen
></iframe>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->