Video

A video component with custom controls

Usage

To apply the video component to an element add the data-f-video attribute to a container element that has the specific video HTML found below. If you have a few videos the player will automatically load the next one when the last video has finished playing (if required).

You can also have captions that show and hide at certain frames in the video by using a data attribute. More on this later.

Example

00:00
00:00

Amazing New Adventures

Come and visit new parts of the world

Dont wait, there is a wide world out there that you can explore! contact us to see what we can do

Find out more

More New Adventures

Dont wait, there is a wide world out there that you can explore! contact us to see what we can do

Find out more
00:00
00:00

Places for you to visit

There are several great places that you can visit. You should contact us to see the type of adventure we can organise

Find out more
00:00
00:00

Diverse Range of Activities

Text

Thank you for watching

This has being FatVideo playing courtesy of Alex.

This is a title

Fallback when you dont support autoplay!

Come and see a wide range of tasks and activties

Act now!

Markup

<div class="f-video" data-f-video="{ option: value }">
	<!-- First video - repeat for as many videos as you need -->
	<div class="f-video-container">
		<!-- Video loading icon -->
		<svg class="f-video-loader" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
			<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
		</svg>
		<!-- Video controls - optional, pick and choose which are required -->
		<div class="f-video-controls f-flex f-flex-middle">
			<button class="f-btn f-video-play" type="button" role="button" aria-label="Play video"><i class="material-icons">play_arrow</i></button>
			<button class="f-btn f-video-pause" type="button" role="button" aria-label="Pause video"><i class="material-icons">pause</i></button>
			<span class="f-video-played">00:00</span>
			<div class="f-video-progress-bar f-flex-grow">
				<div class="f-video-progress">
					<!-- Only really needed if you don't have the time elapsed and duration -->
					<div class="f-video-progress-inner">
						<span class="f-video-progress-time"></span>
						<span class="f-video-progress-value"></span>
					</div>
				</div>
				<div class="f-video-buffer"></div>
			</div>
			<span class="f-video-duration">00:00</span>
			<button class="f-btn f-video-mute f-video-muted" type="button" aria-label="mute / unmute"><i class="material-icons f-volume-off">volume_off</i><i class="material-icons f-volume-up">volume_up</i></button>
			<div class="f-video-volume"><div class="f-video-volume-bar" aria-label="volume level" role="slider" aria-valuemin="0" aria-valuemax="1" aria-readonly="false" tabindex="0" aria-disabled="false" aria-valuenow="1" aria-valuetext="1"></div></div>
			<button class="f-btn f-video-previous" type="button" role="button" aria-label="Play previous video"><i class="material-icons">first_page</i></button>
			<button class="f-btn f-video-next" type="button" role="button" aria-label="Play next video"><i class="material-icons">last_page</i></button>
		</div>
		<!-- Progress overlay, if required overlays the video when progress control is hovered -->
		<div class="f-video-progress-overlay"></div>
		<!-- The actual video element -->
		<video preload="none" muted>
			<source src="/images/BuckBunnyClip1.mp4" type="video/mp4">
		</video>
		<!-- A nice (dotted) video overlay -->
		<div class="f-video-overlay"></div>
		<!-- Captions to show over the video -->
		<div class="f-video-caption">
			<h1 data-animation-start="5" data-animation-end="12">Amazing New Adventures</h1>
		</div>
		<div class="f-video-caption">
			<h1 data-animation-start="13" data-animation-end="19">More New Adventures</h1>
			<p data-animation-start="15" data-animation-end="19">Text to go in here</p>
		</div>
	</div>
</div>

Controls

There are 3 options for the controls position. The default is at the bottom on hover. If you add the f-video-controls-top class to the controls element the hover will bring them in from the top. The final option is to have them fixed below the video. Add a class of f-video-controls-fixed to f-video-container.

Example

<div class="f-video-container f-video-controls-fixed">
	<div class="f-video-controls f-flex f-flex-middle"></div>
</div>
<!-- OR -->
<div class="f-video-container">
	<div class="f-video-controls f-video-controls-top f-flex f-flex-middle"></div>
</div>

The example markup at the top of the page gives you all control options but you don't have to include all or any of the controls. Because they are styled using some basic flexbox they will shrink and grow depending on how many items there are.


Captions

You can have as many caption elements as you need and for each you need one or more nested elements that contain a data-animation-start (optionally data-animation-end) attribute, the value of which corresponds to the second of the video you would like the caption to show (and end).

Example

<div class="f-video-caption">
	<h1 data-animation-start="13" data-animation-end="19">Show at 13 seconds, hide at 19 seconds</h1>
	<p data-animation-start="15" data-animation-end="19">Show at 15 seconds, hide at 19 seconds</p>
</div>

JavaScript options

Option Possible value Default Description
autoplay boolean true Play through all videos and loop
play_on_start boolean true Start playing when the page and video have loaded
pause_hover boolean false Pause video on container hover
pause_click boolean false Pause the video on container click
pause_controls boolean false Pause the video on controls hover
slow_on_caption boolean false Slow video by half on caption hover

Init element manually

var objMap = FatKit.video(videocontainer, { /* options */ });

Events

Name Parameter Description
loaded.f.video video On video loaded
next.f.video video On video change