<!-- 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