Appearance

Responsive Video ​

Click to preview the Responsive Video demo. View demo

Code:

html
<div class="row">
<div class="col-sm-6">
<div class="lightbox-title">

Youtube ​

Code:

html
<h3>Youtube</h3>
</div>
<div class="responsive-video">
<iframe frameborder="0" height="480" src="//www.youtube.com/embed/AkcUoA2f-jU?list=UUIkFV7_2tEhhEhh1NkkwTUw" width="853"></iframe>
</div>
<div class="pt-10"></div>
<pre class="prettyprint light">&lt;div class="responsive-video"&gt;
    &lt;iframe width="853" height="480" src="//www.youtube.com/embed/AkcUoA2f-jU?list=UUIkFV7_2tEhhEhh1NkkwTUw" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;</pre>
</div>
<div class="col-sm-6">
<div class="lightbox-title">

Embed ​

Code:

html
<h3>Embed</h3>
</div>
<div class="responsive-video">
<embed allowfullscreen="true" allownetworking="all" allowscriptaccess="always" id="flashfirebug_1411005825991" name="flashfirebug_1411005825991" src="/portals/13/video/Book4952.swf" type="application/x-shockwave-flash" wmode="Opaque"></embed>
</div>
<div class="pt-10"></div>
<pre class="prettyprint light">&lt;div class="responsive-video"&gt;
     &lt;embed  src="/portals/13/video/Book4952.swf" type="application/x-shockwave-flash" allownetworking="all" allowfullscreen="true" allowscriptaccess="always" wmode="Opaque"&gt;&lt;/embed&gt;
&lt;/div&gt;</pre>
</div>
</div>
<div class="pt-30"></div>
<div class="row">
<div class="col-sm-6">
<div class="lightbox-title">

Vimeo ​

Code:

html
<h3>Vimeo</h3>
</div>
<div class="responsive-video">
<iframe frameborder="0" height="1080" src="https://player.vimeo.com/video/181538531?title=0&amp;portrait=0&amp;byline=0&amp;autoplay=1&amp;loop=1" width="1920"></iframe>
</div>
<div class="pt-10"></div>
<pre class="prettyprint light">&lt;div class="responsive-video"&gt;
    &lt;iframe src="https://player.vimeo.com/video/181538531?title=0&amp;portrait=0&amp;byline=0&amp;autoplay=1&amp;loop=1" width="1920" height="1080" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt; 
&lt;/div&gt;</pre>
</div>
<div class="col-sm-6">
<div class="lightbox-title">

Video ​

Code:

html
<h3>Video</h3>
</div>
<div class="responsive-video">
<video height="1080" width="1920">
<source src="/portals/13/video/Book4952.mp4" type="video/mp4"></source>
<source src="/portals/13/video/Book4952.ogv" type="video/mp4"></source>
<source src="/portals/13/video/Book4952.webm" type="video/mp4"></source>
Your browser does not support the video tag.</video>
</div>
<div class="pt-10"></div>
<pre class="prettyprint light">&lt;div class="responsive-video"&gt;
    &lt;video width="1920" height="1080"  controls="true"&gt;
    &lt;source src="/portals/13/video/Book4952.mp4" type="video/mp4"&gt;&lt;/source&gt;
    &lt;source src="/portals/13/video/Book4952.ogv" type="video/ogg"&gt;&lt;/source&gt;
    &lt;source src="/portals/13/video/Book4952.webm" type="video/WebM"&gt;&lt;/source&gt;
    Your browser does not support the video tag. &lt;/video&gt;
&lt;/div&gt;</pre>
</div>
</div>

</div>