Vue Bootstrap Embeds

Vue 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

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

Show code

template

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

Aspect ratios

Aspect ratios can be customized with modifier classes.

Show code

template

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

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

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

Show code

template

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

Vimeo IFrame

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

Show code

template

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