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>
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>
Video within modals MDB Pro component
<template>
<mdb-container class="mt-5">
<mdb-row>
<!-- Grid column -->
<mdb-col lg="4" md="12" class="mb-4">
<a @click="showModal = true"><img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/screens/yt/screen-video-1.webp" alt="video" data-toggle="modal" data-target="#modal1"></a>
<mdb-modal size="lg" :show="showModal" @close="showModal = false">
<mdb-modal-body class="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>
</mdb-modal-body>
<mdb-modal-footer class="justify-content-center">
<span class="mr-4">Spread the word!</span>
<a class="btn-floating btn-sm btn-fb"><i class="fab fa-facebook"></i></a>
<!--Twitter-->
<a class="btn-floating btn-sm btn-tw"><i class="fab fa-twitter"></i></a>
<!--Google +-->
<a class="btn-floating btn-sm btn-gplus"><i class="fab fa-google-plus"></i></a>
<!--Linkedin-->
<a class="btn-floating btn-sm btn-ins"><i class="fab fa-linkedin-in"></i></a>
<mdb-btn outline="primary" rounded size="md" class="ml-4" @click.native="showModal = false">Close
</mdb-btn>
</mdb-modal-footer>
</mdb-modal>
</mdb-col>
<!-- Grid column -->
<!-- Grid column -->
<mdb-col lg="4" md="6" class="mb-4">
<a @click="showModal2 = true"><img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/screens/yt/screen-video-2.webp" alt="video" data-toggle="modal" data-target="#modal1"></a>
<mdb-modal size="lg" :show="showModal2" @close="showModal2 = false">
<mdb-modal-body class="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/wTcNtgA6gHs"
allowfullscreen></iframe>
</div>
</mdb-modal-body>
<mdb-modal-footer class="justify-content-center">
<span class="mr-4">Spread the word!</span>
<a class="btn-floating btn-sm btn-fb"><i class="fab fa-facebook"></i></a>
<!--Twitter-->
<a class="btn-floating btn-sm btn-tw"><i class="fab fa-twitter"></i></a>
<!--Google +-->
<a class="btn-floating btn-sm btn-gplus"><i class="fab fa-google-plus"></i></a>
<!--Linkedin-->
<a class="btn-floating btn-sm btn-ins"><i class="fab fa-linkedin-in"></i></a>
<mdb-btn outline="primary" rounded size="md" class="ml-4" @click.native="showModal2 = false">Close
</mdb-btn>
</mdb-modal-footer>
</mdb-modal>
</mdb-col>
<!-- Grid column -->
<!-- Grid column -->
<mdb-col lg="4" md="6" class="mb-4">
<a @click="showModal3 = true"><img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/screens/yt/screen-video-3.webp" alt="video" data-toggle="modal" data-target="#modal1"></a>
<mdb-modal size="lg" :show="showModal3" @close="showModal3 = false">
<mdb-modal-body class="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/vlDzYIIOYmM"
allowfullscreen></iframe>
</div>
</mdb-modal-body>
<mdb-modal-footer class="justify-content-center">
<span class="mr-4">Spread the word!</span>
<a class="btn-floating btn-sm btn-fb"><i class="fab fa-facebook"></i></a>
<!--Twitter-->
<a class="btn-floating btn-sm btn-tw"><i class="fab fa-twitter"></i></a>
<!--Google +-->
<a class="btn-floating btn-sm btn-gplus"><i class="fab fa-google-plus"></i></a>
<!--Linkedin-->
<a class="btn-floating btn-sm btn-ins"><i class="fab fa-linkedin-in"></i></a>
<mdb-btn outline="primary" rounded size="md" class="ml-4" @click.native="showModal3 = false">Close
</mdb-btn>
</mdb-modal-footer>
</mdb-modal>
</mdb-col>
<!-- Grid column -->
</mdb-row>
</mdb-container>
</template>
<script>
import {
mdbContainer,
mdbRow,
mdbCol,
mdbIcon,
mdbModal,
mdbModalHeader,
mdbModalTitle,
mdbModalBody,
mdbModalFooter,
mdbBtn,
mdbNavItem
} from 'mdbvue';
export default {
name: 'VideoProPage',
data() {
return {
showModal: false,
showModal2: false,
showModal3: false
};
},
components: {
mdbContainer,
mdbRow,
mdbCol,
mdbIcon,
mdbModal,
mdbModalHeader,
mdbModalTitle,
mdbModalBody,
mdbModalFooter,
mdbBtn,
mdbNavItem
}
};
</script>
Video carousel
<template>
<mdb-container>
<mdb-carousel :interval="8000" :items="videoCarousel" indicators controlls></mdb-carousel>
</mdb-container>
</template>
<script>
import {
mdbContainer,
mdbCarousel
} from 'mdbvue';
export default {
name: 'VideoPage',
components: {
mdbContainer,
mdbCarousel
},
data() {
return {
videoCarousel: [{
video: true,
src: "https://mdbootstrap.com/img/video/Lines.mp4",
loop: true,
auto: true,
muted: true,
mask: 'black-light',
caption: {
title: 'Light mask'
}
},
{
video: true,
src: "https://mdbootstrap.com/img/video/animation-intro.mp4",
loop: true,
auto: true,
muted: true,
mask: 'black-slight',
caption: {
title: 'Slight mask'
}
},
{
video: true,
src: "https://mdbootstrap.com/img/video/Nature-Sunset.mp4",
loop: true,
auto: true,
muted: true,
mask: 'black-strong',
caption: {
title: 'Strong mask'
}
}
]
}
}
};
</script>
Full page video carousel
Click the button below to see a live preview.
Video background MDB Pro component
Click the image below to see a 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.webp" 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
mutedin 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>