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

HTML code

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

<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>

CSS code

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

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;
}
                                    

Javascript/Jquery code

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

$(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();
}); 

Similar snippets

Bootstrap snippet media video players

media video players

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Apr 23rd 2016, 00:52

Views: 2.8K

Rated 5/5 based on 2 reviews