Main Content
Video Styles
Standard Wireframing Elements
Video Style 1
Close
HTML
<section class="video-style-1">
<div class="container">
<iframe src="https://player.vimeo.com/video/215609798" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</section>CSS
.video-style-1{
width: 100%;
}
.video-style-1 iframe{
display: block;
width: 100%;
}CSS Mobile
Javascript
jQuery.fn.aiVideo = function(settings) {
settings = jQuery.extend({
videos: [],
navigation: false
},settings)
if ( settings.videos.length == 0 ) {
return;
}
return jQuery(this).each( function(i,v) {
new videoScript____(jQuery(v),settings);
})
function videoScript____(elem,settings){
var player, progressbar;
var playerContainerId = 'jplayer_container_' + jQuery("div").index( elem );
elem.attr("id",playerContainerId);
player = jQuery(elem).find(".jp-jplayer").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", settings.videos[0]);
},
timeupdate: function(event) {
progressbar.slider("value", event.jPlayer.status.currentPercentAbsolute);
},
supplied: "webmv, ogv, m4v",
globalVolume: false,
cssSelectorAncestor: ("#" + elem.attr("id") ),
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true,
});
// Create the progress slider control
progressbar = elem.find(".jp-progress").slider({
max: 100,
animate: "fast",
range: "min",
step: 0.1,
value : 0,
slide: function(event, ui) {
var sp = player.data("jPlayer").status.seekPercent;
if(sp > 0) {
// Move the play-head to the value and factor in the seek percent.
player.jPlayer("playHead", ui.value * (100 / sp));
} else {
// Create a timeout to reset this slider to zero.
setTimeout(function() {
progressbar.slider("value", 0);
}, 0);
}
}
});
// Create the volume slider control
elem.find('.jp-volume-slider').slider({
orientation: "vertical",
animate: "fast",
max: 1,
range: "min",
step: 0.01,
value : $.jPlayer.prototype.options.volume,
slide: function(event, ui) {
player.jPlayer("option", "muted", false);
player.jPlayer("option", "volume", ui.value);
}
});
/// toggle volume controller
var plug = false;
elem.find(".audio-button").click(function(){
if(plug != true){
elem.find(".jp-volume-slider").fadeIn();
plug = true;
}
else{
elem.find(".jp-volume-slider").fadeOut();
plug = false;
}
});
/// if play single exist
elem.find(".play-single .jp-play").click(function(){
elem.find('.play-single').fadeOut();
elem.find('.jp-interface').fadeIn();
});
//navigation
if ( settings.navigation ) {
if ( jQuery(settings.navigation).length > 0 ) {
jQuery(settings.navigation).click( function(elem) {
elem.preventDefault();
var index = jQuery(elem.currentTarget).attr("data-video");
player.jPlayer("setMedia", settings.videos[index]);
player.jPlayer("play");
})
}
}
}
}Video Style 2
Close
HTML
<section class="video-style-2">
<div class="container">
<div class="row">
<div class="video-list">
<iframe src="https://player.vimeo.com/video/215609798" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<div class="video-thumb">
<a data-video='0' href="#">
<canvas width="166" height="117"></canvas>
</a>
<a data-video='1' href="#">
<canvas width="166" height="117"></canvas>
</a>
<a data-video='2' href="#">
<canvas width="166" height="117"></canvas>
</a>
</div>
</div>
</div>
</div>
</section> <!-- video style 1 -->
CSS
.video-style-2{
margin: 20px 0;
}
.video-style-2 .video-list{
position: relative;
display: block;
width: 100%;
}
.video-style-2 .video-list iframe{
display: block;
width: 100%;
}
/** Video Thumb **/
.video-style-2 .video-thumb{
width: 100%;
height: auto;
font-size: 0;
margin-top: 29px;
}
.video-style-2 .video-thumb a{
display: inline-block;
vertical-align: top;
width: 30%;
margin-left: 5%;
position: relative;
}
.video-style-2 .video-thumb a:first-child{
margin-left: 0;
}
.video-style-2 .video-thumb a canvas{
display: block;
width: 100%;
height: auto;
background: #d7d7d7;
}
.video-style-2 .video-thumb a:after{
display: block;
content: "\b0087";
position: absolute;
left: 50%;
width: 40px;
height: 40px;
background: #009bbb;
color: #fff;
font-family: 'agentimage' !important;
font-size: 20px;
top: 50%;
margin-top: -20px;
margin-left: -20px;
text-align: center;
line-height: 40px;
}CSS Mobile
Javascript
Video Style 3
Close
HTML
<section class="video-style-3">
<div class="jp-video jp-video-270p" role="application" aria-label="media player" id="jplayer_container_48">
<div class="jp-type-single">
<div id="jquery_jplayer_2" class="jp-jplayer" style="width: 480px; height: 270px;"><img id="jp_poster_2" style="width: 480px; height: 270px; display: block;" src="https://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/09/ai-thumbnail.png"><video id="jp_video_2" preload="metadata" style="width: 0px; height: 0px;" src="http://10.3.1.34/ai-standard-wireframing/components/video/video-style-1/videos/AgentImage_VP8.webm" title="Agentimage"></video></div>
<div class="play-single">
<button class="jp-play ai-font-play-button-a" role="button" tabindex="0"></button>
</div>
<div class="jp-gui">
<div class="jp-interface">
<div class="jp-progress ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 0%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a></div>
<div class="jp-controls-holder">
<div class="jp-controls">
<button class="jp-play ai-font-play-button-a" role="button" tabindex="0"></button>
<div class="jp-current-time" role="timer" aria-label="time">00:00</div>
</div>
<div class="vol-control">
<button class="audio-button ai-font-volume-a"></button>
<div class="jp-volume-slider ui-slider ui-slider-vertical ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="height: 80%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="bottom: 80%;"></a></div>
</div>
</div>
</div>
</div>
</div>
</div><!-- end of jp player -->
</section>CSS
.video-style-3{
margin: 20px 0;
}
.video-style-3 {
position: relative;
}
.video-style-3 .jp-video{
width: 100%;
height: auto;
background: #000;
position: relative;
overflow: hidden;
}
.video-style-3 .jp-jplayer{
width: 100% !important;
height: auto !important;
}
.video-style-3 .jp-jplayer img{
position: absolute;
left: 0;
top: 0;
}
.video-style-3 .jp-jplayer img{
width: 100% !important;
height: auto !important;
}
.video-style-3 .jp-jplayer video{
width: 100% !important;
height: 500px !important;
}
.video-style-3 .jp-gui{
position: absolute;
left: 0;
bottom: 30px;
padding: 0 15%;
width: 100%;
}
.video-style-3 .jp-interface{
width: 100%;
height: auto;
background: #e4e4e4;
height: 40px;
position: relative;
padding: 15px 0 0;
display: none;
}
.video-style-3 .jp-progress{
width: 85%;
height: 9px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #c2c2c2;
border: none;
position: relative;
margin: 0 auto;
}
.video-style-3 .ui-slider-range{
background: #009bbb;
height: 9px;
}
.video-style-3 .jp-progress .ui-slider-handle{
width: 17px;
height: 17px;
-webkit-border-radius: 8px 9px 9px 8px/8px 8px 9px 9px;
-moz-border-radius: 8px 9px 9px 8px/8px 8px 9px 9px;
border-radius: 8px 9px 9px 8px/8px 8px 9px 9px;
background-color: #fff;
display: block;
position: absolute;
top: -.3em;
margin-left: -.5em;
border:none;
outline: none;
}
.video-style-3 .jp-controls .jp-play{
width: 40px;
height: 40px;
background: #009bbb;
border: none;
position: absolute;
left: 0;
top: 0;
color: #fff;
outline: none;
}
.video-style-3 .jp-state-playing .jp-controls .jp-play:before{
content: "\e998";
}
.video-style-3 .jp-controls-holder .vol-control{
position: absolute;
right: 0;
top: 0;
width: 40px;
height: 40px;
}
.video-style-3 .jp-controls-holder .vol-control .audio-button{
width: 40px;
height: 40px;
background: #009bbb;
border: none;
position: absolute;
right: 0;
top: 0;
color: #fff;
outline: none;
}
.video-style-3 .jp-controls-holder .vol-control .audio-button:before{
position: absolute;
left: 50%;
top: 50%;
margin-left: -10px;
margin-top: -8px;
}
.video-style-3 .jp-controls-holder .vol-control .jp-volume-slider{
position: absolute;
right: 10px;
bottom: 43px;
width: .8em;
height: 100px;
background: #c2c2c2;
display: none;
}
.video-style-3 .jp-controls-holder .vol-control .ui-slider-range{
bottom: 0;
position: absolute;
width: 100%;
}
.video-style-3 .jp-controls-holder .vol-control .ui-slider-handle{
background: #fff;
border: 1px solid grey;
width: 20px;
height: 20px;
display: block;
margin-left: -3px;
border-radius: 20%;
position: absolute;
left: 0;
outline: none;
}
.video-style-3 .jp-current-time{
position: absolute;
bottom: 2px;
right: 8%;
font-size: 11px;
}
.video-style-3 .play-single {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
}
.video-style-3 .play-single button{
width: 117px;
height: 117px;
-webkit-border-radius: 58px 59px 59px 58px/58px 58px 59px 59px;
-moz-border-radius: 58px 59px 59px 58px/58px 58px 59px 59px;
border-radius: 58px 59px 59px 58px/58px 58px 59px 59px;
border: solid 2px #fff;
background: transparent;
color: #fff;
font-size: 53px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -58.5px;
margin-top: -58.5px;
outline: none;
}
.video-style-3 .play-single button:before {
position: absolute;
left: 50%;
top: 50%;
margin-left: -14.5px;
margin-top: -26px;
}CSS Mobile
Javascript
00:00