Elements
These modular elements can be readily used and customized across pages and in different blocks.
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