"Responsive YouTube video container"
Bootstrap 3.2.0 Snippet by raiverma

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="col-sm-6 col-xs-12 video-container">
<h3 class="video-mobile-headline">Watch the Preview</h3>
<div class="vid">
<center><h3>Why Pankajs Asija ? </h3></center>
<p>
Few years back got in profession of RD. training really did not known where I was going but today when I hear people saying He is a real man who has changed my life Sir,
you are really energy bomb My life has been full of happiness listening to you it Motivates me to do more for people.
</p>
</div><!--End vid-->
</div>
<div class="col-sm-6 col-xs-12 video-container">
<h3 class="video-mobile-headline">Why Pankaj Asija</h3>
<div class="vid">
<!--<img class="responsive placard" src="" alt=""/>-->
<iframe width="840" height="560" src="https://www.youtube.com/embed/i_MAoq7KzwE" frameborder="0" allowfullscreen=""></iframe>
</div><!--End vid-->
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.video-container{background:#fff;padding:15px 15px 0px 15px;}
.vid {position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; margin-bottom: 25px;}
.vid iframe, .vid object,.vid embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.video-mobile-headline{display: none; margin:0px;}
/*Mobile Rendering. Add to the very end of your CSS file.*/
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
.video-container{padding-bottom:10px;}
.flex-video { padding-top: 0;}
}
@media (max-width: 767px){
.video-mobile-headline{display: block;}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Argon Design System
Responsive Invoice template
Responsive Data Cards (Bootstrap 4)
Responsive Event Html template bootstrap 4

Questions / Comments: