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="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

Vimeo player

Default player

Soundcloud

Default audio

Example


	<div class="promo-video-holder">
		<div class="promo-video">
		  	<img class="img-fluid" src="img/home/v-poster.jpg" alt="">
		  	<a class="video-link" data-fancybox href="https://www.youtube.com/watch?v=sEl5hp8MEGs"><i class="fa fa-play play-icon" aria-hidden="true"></i></a>
		</div>
	</div>

						
how to use
  • Modal video is designed using Fancybox Jquery plugin. Read the user documentation properly
  • You can call fancybox through data-fancybox attribute as shown in the code example.
  • You can use your own class names to customize style