.video {
	
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	background-color: #000;
}

.video__media {
	
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.video__button {
	
	position: absolute;
	top: 50%;
	left: 50%;
	padding: 0;
	width: 68px;
	height: 48px;
	border: none;
	background-color: transparent;
	transform: translate(-50%, -50%);
	display: none;
}

.video__button-shape {
	
	fill: #212121;
	fill-opacity: 0.8;
}

.video__button {
	
	outline: none;
}

.video:hover .video__button-shape,
.video__button:focus .video__button-shape {
	
	fill: #ff0000;
	fill-opacity: 1;
}

.video__button-icon {
	
	fill: #fff;
}

.video--enabled,
img.video__media {
	
	cursor: pointer;
}

.video--enabled .video__button {
	
	display: block;
}
.video__link:before {
    content: '';
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    width: 68px;
    height: 48px;
    
    border: none;
    background-color: #ff0000;
    transform: translate(-50%, -50%);
    background-color: #212121;
    opacity: 0.8;
    
    border-radius: 10px;


    z-index: 1;
}

.video__link:hover:before {

    background-color: #ff0000;
    opacity: 1;

}

a.video__link:after {


    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    border-style: solid;
    border-width: 1em 0 1em 1.732em;
    border-color: transparent transparent transparent rgb(255 255 255);
    font-size: 0.75em;
    width: 0;
    height: 0;
    z-index: 2;
}

.video.video--enabled .video__link:after,
.video.video--enabled .video__link:before {
    display:none;
}.video__link:before {
    content: '';
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    width: 68px;
    height: 48px;
    
    border: none;
    background-color: #ff0000;
    transform: translate(-50%, -50%);
    background-color: #212121;
    opacity: 0.8;
    
    border-radius: 10px;

    z-index: 1;
    cursor: pointer;
}

.video__link:hover:before {

    background-color: #ff0000;
    opacity: 1;

}

a.video__link:after {


    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    border-style: solid;
    border-width: 1em 0 1em 1.732em;
    border-color: transparent transparent transparent rgb(255 255 255);
    font-size: 0.75em;
    width: 0;
    height: 0;
    z-index: 2;
    cursor: pointer;
}

.video.video--enabled .video__link:after,
.video.video--enabled .video__link:before {
    display:none;
}