Embeds

Bootstrap embeds

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

Bootstrap embeds is a utility which helps you to insert a 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

Let's 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 its use.

Edit in sandbox 
        
            

      <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.

Edit in sandbox 
        
            

        <!-- 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

A 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 Bootstrap integration, you can put the content of the IFrame inside a 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 a contact section

See the following examples to get a good grip of IFrames.

YouTube IFrame

Use the code below to embed the Youtube video i HTML document.

Edit in sandbox 
        
            

            <div class="embed-responsive embed-responsive-16by9">
              <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/v64KOxKVLVg" allowfullscreen></iframe>
            </div>

Vimeo IFrame

Use the code below to embed the Vimeo video i HTML document.

Edit in sandbox 
        
            

            <div class="embed-responsive embed-responsive-16by9">
              <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/137857207" allowfullscreen></iframe>
            </div>

Google maps

Use the code below to add Google map to a web page.

Edit in sandbox 
        
            

            <!--Google map-->
            <div id="map-container" class="z-depth-1-half map-container" style="height: 500px">
              <iframe src="https://maps.google.com/maps?q=manhatan&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0"
                style="border:0" allowfullscreen></iframe>
            </div>
          
        
    
        
            

            .map-container{
              overflow:hidden;
              padding-bottom:56.25%;
              position:relative;
              height:0;
            }
            .map-container iframe{
              left:0;
              top:0;
              height:100%;
              width:100%;
              position:absolute;
            }

IFrame in modals MDB Pro component

You can even use iframe inside modal.

Edit in sandbox 
        
            

            <div class="text-center">

              <button type="button" class="btn btn-info" data-toggle="modal" data-target="#modalYT">YouTube Modal</button>
              <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalVM">Vimeo Modal</button>
              <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#modalGM">Google Maps
                Modal</button>

            </div>

            <!--Modal: Name-->
            <div class="modal fade" id="modalYT" 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">
                    <span class="mr-4">Spread the word!</span>
                    <a type="button" class="btn-floating btn-sm btn-fb">
                      <i class="fab fa-facebook-f"></i>
                    </a>
                    <!--Twitter-->
                    <a type="button" class="btn-floating btn-sm btn-tw">
                      <i class="fab fa-twitter"></i>
                    </a>
                    <!--Google +-->
                    <a type="button" class="btn-floating btn-sm btn-gplus">
                      <i class="fab fa-google-plus-g"></i>
                    </a>
                    <!--Linkedin-->
                    <a type="button" class="btn-floating btn-sm btn-ins">
                      <i class="fab fa-linkedin-in"></i>
                    </a>

                    <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>

                  </div>

                </div>
                <!--/.Content-->

              </div>
            </div>
            <!--Modal: Name-->

            <!--Modal: Name-->
            <div class="modal fade" id="modalVM" 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>

                  </div>

                  <!--Footer-->
                  <div class="modal-footer justify-content-center">
                    <span class="mr-4">Spread the word!</span>
                    <a type="button" class="btn-floating btn-sm btn-fb">
                      <i class="fab fa-facebook-f"></i>
                    </a>
                    <!--Twitter-->
                    <a type="button" class="btn-floating btn-sm btn-tw">
                      <i class="fab fa-twitter"></i>
                    </a>
                    <!--Google +-->
                    <a type="button" class="btn-floating btn-sm btn-gplus">
                      <i class="fab fa-google-plus-g"></i>
                    </a>
                    <!--Linkedin-->
                    <a type="button" class="btn-floating btn-sm btn-ins">
                      <i class="fab fa-linkedin-in"></i>
                    </a>

                    <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>

                  </div>

                </div>
                <!--/.Content-->

              </div>
            </div>
            <!--Modal: Name-->

            <!--Modal: Name-->
            <div 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-->
                    <div id="map-container-2" class="z-depth-1-half" style="height: 400px"></div>

                  </div>

                  <!--Footer-->
                  <div class="modal-footer justify-content-center">

                    <button type="button" class="btn btn-primary btn-md">Save location
                      <i class="fas fa-map-marker-alt ml-1"></i>
                    </button>
                    <button type="button" class="btn btn-outline-primary btn-md" data-dismiss="modal">Close
                      <i class="fas fa-times ml-1"></i>
                    </button>

                  </div>

                </div>
                <!--/.Content-->

              </div>
            </div>
            <!--Modal: Name-->