Iframe

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.

Examples

Default Iframe example.

######html

  <div
    id="cdb-iframe1"
    class="cdb-iframe"
    src="https://www.youtube.com/embed/xnczyP2jSR0"
    title="main video"
    allowFullScreen
    frameBorder="10"
    ratio="4x3"
  ></div>

######Script

    <script>
      new CDB.IFrame(document.querySelector('#cdb-iframe1'));
      new CDB.IFrame(document.querySelector('#cdb-iframe2'));
    </script>

Iframe Customized

######html

<div
id="cdb-iframe2"
class="cdb-iframe"
src="https://www.youtube.com/embed/xnczyP2jSR0"
title="main video"
allowFullScreen
frameBorder="10"
ratio="4x3"
></div>

######Script

    <script>
      new CDB.IFrame(document.querySelector('#cdb-iframe1'));
      new CDB.IFrame(document.querySelector('#cdb-iframe2'));
    </script>

Footer

Input