responsive video with description

This bootstrap snippet called "responsive video with description" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: video

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-md-6">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>Video window</h5>
        </div>
        <div class="ibox-content">
            <figure>
                <iframe src="http://www.youtube.com/embed/bwj2s_5e12U" frameborder="0" allowfullscreen="" data-aspectratio="0.8211764705882353" style="width: 523px; height: 429.475px;"></iframe>
            </figure>
        </div>
    </div>
</div>

<div class="col-md-6">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>Video description</h5>
        </div>
        <div class="ibox-content profile-content">
            <h4><strong>Bootdey responsive video snippet</strong></h4>
            <p><i class="fa fa-clock-o"></i> Uploaded on Jan 27, 2016</p>
            <h5>
                Science and Technology
            </h5>
            <p>
                Lorem ipsum dolor sit amet, et singulis eleifend concludaturque cum. Ne solet eleifend prodesset sed. Iusto deleniti
                <br>
                <br>
                <small>Lorem ipsum dolor sit amet, et singulis eleifend concludaturque cum. Ne solet eleifend prodesset</small>
                <br>
                <br>
                Lorem ipsum dolor sit amet, et singulis eleifend concludaturque cum. Ne solet eleifend prodesset sed. Iusto deleniti mandamus has ut, 
                vim ut omnium ponderum tractatos, oratio nostrud no mea. Dolorum assentior sed cu </p>
            <div class="row m-t-md">
                <div class="col-md-3">
                    <h5><strong>169</strong> Likes</h5>
                </div>
                <div class="col-md-9">
                    <h5><strong>28</strong> Comments</h5>
                </div>
            </div>
        </div>
    </div>
</div>

</div>
</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

body{
background:#eee; 
margin-top:10px;
}

.ibox {
  clear: both;
  margin-bottom: 25px;
  margin-top: 0;
  padding: 0;
}
.ibox.collapsed .ibox-content {
  display: none;
}
.ibox.collapsed .fa.fa-chevron-up:before {
  content: "\f078";
}
.ibox.collapsed .fa.fa-chevron-down:before {
  content: "\f077";
}
.ibox:after,
.ibox:before {
  display: table;
}
.ibox-title {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background-color: #ffffff;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 3px 0 0;
  color: inherit;
  margin-bottom: 0;
  padding: 14px 15px 7px;
  min-height: 48px;
}
.ibox-title h5 {
    display: inline-block;
    font-size: 14px;
    margin: 0 0 7px;
    padding: 0;
    text-overflow: ellipsis;
    float: left;
}
.ibox-tools a {
    cursor: pointer;
    margin-left: 5px;
    color: #c4c4c4;
}
.ibox-tools {
    display: block;
    float: none;
    margin-top: 0;
    position: relative;
    padding: 0;
    text-align: right;
}
.ibox-content {
  background-color: #ffffff;
  color: inherit;
  padding: 15px 20px 20px 20px;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 1px 0;
}
.ibox-footer {
  color: inherit;
  border-top: 1px solid #e7eaec;
  font-size: 90%;
  background: #ffffff;
  padding: 10px 15px;
}
video {
  width: 100% !important;
  height: auto !important;
}
                                    

This is the JS code for this bootstrap snippet

Copy, paste, change, customize and run the following JS code to get a result Like the one shown in the preview

$(function() {
    var $allVideos = $("iframe[src^='http://player.vimeo.com'], iframe[src^='http://www.youtube.com'], object, embed"),
        $fluidEl = $("figure");

    $allVideos.each(function() {
        $(this)
            // jQuery .data does not work on object/embed elements
            .attr('data-aspectRatio', this.height / this.width)
            .removeAttr('height')
            .removeAttr('width');
    });
    $(window).resize(function() {
        var newWidth = $fluidEl.width();
        $allVideos.each(function() {
            var $el = $(this);
            $el
                .width(newWidth)
                .height(newWidth * $el.attr('data-aspectRatio'));
        });
    }).resize();
}); 

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Apr 23rd 2016, 00:52

Views: 2.7K

Rated 5/5 based on 1 reviews