media video players

This bootstrap snippet media video players 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

<div class="col-xs-12 col-sm-6">
	<div class="box rte">
		<h2 class="boxHeadline">Youtube video</h2>
		<h3 class="boxHeadlineSub">basic youtube iframe embed</h3>
		<iframe width="100%" height="281" src="https://www.youtube.com/embed/ESXgJ9-H-2U" frameborder="0" allowfullscreen=""></iframe>
	</div>
</div>

<div class="col-xs-12 col-sm-6">
	<div class="box rte">
		<h2 class="boxHeadline">Vimeo payer</h2>
		<h3 class="boxHeadlineSub">Default vimeo embed</h3>
		<iframe src="https://player.vimeo.com/video/62092214" width="100%" height="281" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
	</div>
</div>

<div class="col-xs-12 col-sm-6">
    <div class="box rte">
    	<h2 class="boxHeadline">Default HTML5 player</h2>
    	<h3 class="boxHeadlineSub">native browser player</h3>
    	<video controls="" preload="auto" width="100%" height="281" poster="http://camendesign.com/code/video_for_everybody/poster.jpg">
    		<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"><!-- Safari / iOS, IE9 -->
    		<source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm"><!-- Chrome10+, Ffx4+, Opera10.6+ -->
    		<source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg"><!-- Firefox3.6+ / Opera 10.5+ -->
    		<p class="vjs-no-js">
    			To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
    		</p>
    	</video>
    </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{margin-top:20px;
background:#eee;
}

.box {
    background: #fff;
    padding: 30px;
    margin: 0 0 24px 0;
}

.rte .boxHeadline {
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 400;
    margin: 0 0 25px 0;
}

.rte .boxHeadline+.boxHeadlineSub {
    margin: -18px 0 30px 0;
}

.rte .boxHeadlineSub {
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: 400;
    font-style: italic;
    color: #919599;
    margin: 0 0 25px 0;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Apr 13th 2016, 16:08

Views: 3.1K

Rated 5/5 based on 1 reviews