.btn {
background: url() no-repeat;
width: 100px;
height: 100px;
border: none;
position: relative;
transform: translateY(-50%);
}div.top_menu_link_container, div.top_menu_link_container_end {
float: left;
height: 31px;
}<video autoplay loop class="fullwidth" muted>
<source src="src/video.webm" type="video/webm">
<source src="src/video.mp4" type="video/mp4">
</video>
<div id="mute" class="btn"></div>if ($("video").prop('muted', true)){
$("#mute").css("background-image","url(./src/muted.svg)");
}
$("#mute").click( function (){
if( $("video").prop('muted') ) {
$("video").prop('muted', false);
} else {
$("video").prop('muted', true);
$("#mute").css("background-image","url(./src/muted.svg)");
}
});img.top-display__pills { display: block; max-width: 100%; }position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);<div class="carousel-item active" role="listbox">
<img src="img/slider/header.jpg" class="desktop">
<img src="img/slider/header2.jpg" class="mobile">
</div>
<style>
img.desktop {
display: block;
}
img.mobile {
display: none;
}
@media (max-width: 768px) {
img.desktop {
display: none;
}
img.mobile {
display: block;
}
}
</style>* { margin: 0; padding: 0; }