Elements


These modular elements can be readily used and customized across pages and in different blocks.


	<!-- 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="box-video">
	  <div class="bg-video" style="background-image: url('img/poster2.jpg');">
	    <div class="btn-play">Play</div>
	  </div>
	  <div class="video-container fluid-width-video-wrapper"  style="padding-top: 56.2%;">
	    <iframe src="https://www.youtube.com/embed/xULxQl-6HXU?rel=0&showinfo=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
	  </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

Play

Soundcloud

Example

Default audio

Example