$(document).ready(function() {
$('.col').on('click', function() {
if ( $(this).hasClass('change-color') ) {
$(this).removeClass('change-color');
} else {
$('.col').removeClass('change-color');
$(this).addClass('change-color');
}
});
$(document).click( function(event){
if( $(event.target).closest('.col').length )
return;
$('.col').removeClass('change-color');
event.stopPropagation();
});
});<!-- 16:9 соотношение сторон -->
<div align="center" class="embed-responsive embed-responsive-16by9">
<video autoplay loop class="embed-responsive-item">
<source src="hvideo.mp4" type=video/mp4>
</video>
</div><!-- 4:3 соотношение сторон -->
<div align="center" class="embed-responsive embed-responsive-4by3">
<video autoplay loop class="embed-responsive-item">
<source src="hvideo.mp4" type=video/mp4>
</video>
</div>.rebate-action-register {
display:flex;
justify-content: space-between;
border: 1px solid #E4E4E4;
max-width:1440px;
margin: auto;
}
.rebate-action-item {
position:relative;
width:33.33%;
}
.rebate-action-item:first-child {
margin:0;
z-index:2;
}
.rebate-action-item:nth-child(2) {
z-index:1;
}
.rebate-action-item:after {
content: "";
position:absolute;
right: -13px;
top:0;
width: 0;
height: 0;
border-style: solid;
border-width: 26px 0 26px 12px;
border-color: transparent transparent transparent #c2c2c2;
}
a {
display: block;
text-align:center;
height: 52px;
background: #FBFBFB;
position: relative;
font-size: 17px;
color: #999999;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
}
a:hover {
text-decoration: none;
}
.rebate-action-item.active a {
background-color:#009966;
color:white;
}
.rebate-action-item.active span {
color:white;
}
.rebate-action-item.grey a {
background-color:#F2F2F2;
color: @color-black-ish;
}
.rebate-action-item.grey span {
background-color:#F2F2F2;
color:#BE0027;
}
.rebate-action-item.active a:after {
border-top: 26px solid transparent;
border-bottom: 26px solid transparent;
border-left: 12px solid #009966;
}
.rebate-action-item.grey a:after {
border-top: 26px solid transparent;
border-bottom: 26px solid transparent;
border-left: 12px solid #F2F2F2;
}
.rebate-action-item.active a:after,
.rebate-action-item.grey a:after {
content: "";
position: absolute;
right: -12px;
top: 0;
z-index: 1;
}
.rebate-action-item:last-child a:after,
.rebate-action-item:last-child:after {
display:none;
}