Elements
Video <> show code
<!-- Youtube player -->
<div class="fluid-width-video-wrapper" style="padding-top: 56.25%;">
<iframe src="https://www.youtube.com/embed/xULxQl-6HXU?rel=0&showinfo=0" allowfullscreen="" id="fitvid0"></iframe>
</div>
<!-- Vimeo player -->
<div class="fluid-width-video-wrapper" style="padding-top: 56.2%;">
<iframe src="https://player.vimeo.com/video/23741658" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<!-- Default player -->
<div class="promo-video bg-image" style="background-image: url('img/home/v-poster-s.jpg');">
<div class="video-button video-box">
<a href="javascript:void(0)">
<i class="fa fa-play play-icon" aria-hidden="true" data-video="https://www.youtube.com/embed/g3-VxLQO7do?autoplay=1"></i>
</a>
</div>
</div>
<!-- Soundcloud -->
<div class="video-container fluid-width-video-wrapper" style="padding-top: 46%;">
<iframe scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/46290733&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
<!-- Default audio -->
<audio controls="controls" preload="auto">
<source src="https://raw.githubusercontent.com/kolber/audiojs/master/mp3/bensound-dubstep.mp3">
</audio>
how to use
- Wrap the <iframe> elements into .fluid-width-video-wrapper
- For the default video player, make sure you are using the classes used in the example code above. For customization, add your own class and overwrite the default properties
Youtube player
Example
Vimeo player
Example
Default player
Example
Soundcloud
Example
Default audio
Example
© 2017 Copyright Bigbag Store Bootstrap Template by Abdus.