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>
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.jpg" 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.jpg" 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.jpg" 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>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
Video carousel
<template>
<mdb-container>
<mdb-carousel :interval="8000" showControls showIndicators full>
<mdb-carousel-item video src="https://mdbootstrap.com/img/video/Lines.mp4" mask="black-light" alt="First slide" auto loop>
<mdb-carousel-caption title="Light mask"></mdb-carousel-caption>
</mdb-carousel-item>
<mdb-carousel-item video src="https://mdbootstrap.com/img/video/animation-intro.mp4" mask="black-slight" alt="Second slide" auto loop>
<mdb-carousel-caption title="Super light mask"></mdb-carousel-caption>
</mdb-carousel-item>
<mdb-carousel-item video src="https://mdbootstrap.com/img/video/Nature-Sunset.mp4" mask="black-strong" alt="Third slide" auto loop>
<mdb-carousel-caption title="Strong mask"></mdb-carousel-caption>
</mdb-carousel-item>
</mdb-carousel>
</mdb-container>
</template>
<script>
import { mdbContainer, mdbRow, mdbCol, mdbIcon, mdbCarousel, mdbCarouselItem, mdbCarouselCaption } from 'mdbvue';
export default {
name: 'VideoPage',
components: {
mdbContainer,
mdbRow,
mdbCol,
mdbIcon,
mdbCarousel,
mdbCarouselItem,
mdbCarouselCaption
}
};
</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.
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.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