Vue Bootstrap Video

Vue Video - Bootstrap 4 & Material Design

Vue Bootstrap Video can be resized as desired, and thank to Bootstrap responsiveness, it will adjust to the screen size.

Examples of Vue Bootstrap video use:

  • Trip video on travel blog
  • Company promotional video as background

See the following Vue Bootstrap video examples:

Responsive video 



<template>
  <mdb-container>
    <div class="embed-responsive embed-responsive-21by9">
      <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/vlDzYIIOYmM?enablejsapi=1&origin=https%3A%2F%2Fmdbootstrap.com"></iframe>
    </div>
  </mdb-container>
</template>

<script>
import { mdbContainer, mdbRow, mdbCol } from 'mdbvue';

export default {
  name: 'VideoPage',
  components: {
    mdbContainer,
    mdbRow,
    mdbCol
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

Video iframe

YouTube Iframe

Vimeo Iframe



<template>
  <mdb-container>
    <mdb-row>
      <mdb-col md="6">
        <h4 class="my-4">YouTube Iframe</h4>
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/v64KOxKVLVg" allowfullscreen></iframe>
        </div>
      </mdb-col>
      <mdb-col md="6">
        <h4 class="my-4">Vimeo Iframe</h4>
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/137857207" allowfullscreen></iframe>
        </div>
      </mdb-col>
    </mdb-row>
  </mdb-container>
</template>

<script>
import { mdbContainer, mdbRow, mdbCol } from 'mdbvue';

export default {
  name: 'VideoPage',
  components: {
    mdbContainer,
    mdbRow,
    mdbCol
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

Full page video carousel

Click the button below to see a live preview.

Full Video Carousel

Video background MDB Pro component

Click the image below to see a live preview.

Display of intro page with video
Live preview 


<template>
  <div class="video-background-page">
    <navbar navStyle="margin-top: 60px" :color="'primary'" position="top" dark href="#" transparent scrolling>
      <mdb-navbar-brand href="#"><strong>MDB</strong></mdb-navbar-brand>
      <navbar-collapse style="max-width: 1140px">
        <navbar-nav>
          <navbar-item href="#" waves-fixed>Home</navbar-item>
          <navbar-item href="#" waves-fixed>About</navbar-item>
          <navbar-item href="#" waves-fixed>Features</navbar-item>
          <navbar-item href="#" waves-fixed>Services</navbar-item>
          <navbar-item href="#" waves-fixed>Opinions</navbar-item>
          <navbar-item href="#" waves-fixed>Team</navbar-item>
          <navbar-item href="#" waves-fixed>Contact</navbar-item>
        </navbar-nav>
        <navbar-nav right>
          <navbar-item href="#!" waves-fixed><fa icon="facebook" class="light-green-text-2"/></navbar-item>
          <navbar-item href="#!" waves-fixed><fa icon="twitter" class="light-green-text-2"/></navbar-item>
          <navbar-item href="#!" waves-fixed><fa icon="instagram" class="light-green-text-2"/></navbar-item>
        </navbar-nav>
      </navbar-collapse>
    </navbar>

    <view-wrapper>
      <video class="video-intro" poster="https://mdbootstrap.com/img/Photos/Others/background.jpg" playsInline autoPlay muted="" loop>
        <source src="https://mdbootstrap.com/img/video/animation.mp4" type="video/mp4"/>
      </video>
      <md-mask class="d-flex justify-content-center align-items-center gradient">
        <container class="px-md-3 px-sm-0">
          <row>
            <column md="12" class="mb-4 white-text text-center">
              <h3 class="display-3 font-weight-bold mb-0 pt-md-5">Creative Agency </h3>
              <hr class="hr-light my-4 w-75"/>
              <h4 class="subtext-header mt-2 mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit deleniti consequuntur nihil.</h4>
              <btn outline="white" rounded color="white"><fa icon="home"/> Visit us</btn>
            </column>
          </row>
        </container>
      </md-mask>
    </view-wrapper>

    <container>
      <row class="pt-5 pb-4">
        <column md="12" class="text-center">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </column>
      </row>
    </container>
  </div>
</template>

<script>
import { Container, Row, Column, ViewWrapper, MdMask, Btn, Fa, Navbar, NavbarItem, NavbarNav, NavbarCollapse, mdbNavbarBrand  } from 'mdbvue';

export default {
  name: 'VideoBackgroundPage',
  components: {
    Container,
    Row,
    Column,
    ViewWrapper,
    MdMask,
    Btn,
    Fa,
    Navbar,
    NavbarItem,
    NavbarNav,
    NavbarCollapse,
    mdbNavbarBrand
  }

};
</script>

<style scoped>
.video-background-page .gradient {
    background: -moz-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
    background: -webkit-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
    background: linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
}

.video-background-page .view video {
  top: 0!important;
  left: 0!important;
  transform: none!important;
  height: calc(100vh - 60px);
}

.video-background-page .navbar {
  transition: background .5s ease-in-out,padding .5s ease-in-out;
}

.top-nav-collapse {
  background-color: #563e91 !important;
}
</style>

Video with autoplay option

You can use webm ogv mp4 video formats within your HTML file.

Autoplay in Google Chrome

If you want use video with autoplay option in Chrome you need to add muted in video tag because Google Chrome is blocking autoplay video with sound (either If even you don't have a sound).



<template>
  <mdb-container>
    <video class="video-fluid z-depth-1" autoplay loop controls muted>
      <source src="https://mdbootstrap.com/img/video/Sail-Away.mp4" type="video/mp4" />
    </video>
  </mdb-container>
</template>

<script>
import { mdbContainer, mdbRow, mdbCol } from 'mdbvue';

export default {
  name: 'VideoPage',
  components: {
    mdbContainer,
    mdbRow,
    mdbCol
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

Warning: file_get_contents(common/gs.html): failed to open stream: No such file or directory in /var/www/html/legacy/vue/5.8.3/index.php on line 143

    Warning: file_get_contents(common/gs-ss.html): failed to open stream: No such file or directory in /var/www/html/legacy/vue/5.8.3/index.php on line 143