I am working on a slider feature that includes both videos and pictures. I need to ensure that the videos are hidden when the device width exceeds 600px.
Here is the HTML code snippet:
<video class="player__video" width="506" height="506" muted preload="auto" playsinline poster="[xfvalue_videopathimage]">
<source src="[xfvalue_videopath]" type="video/mp4">
Your browser does not support the video tag.
<div class="player1">
<img class="player2" src=[xfvalue_videopathimage] width="506" height="506">
</div>
</video>
And here is the corresponding CSS:
.player {
position: relative;
text-align: center;
cursor: pointer;
width: 100%;
height: 100%;
}
@media (max-width: 767px) {
.player {
overflow: hidden;
}
}
.player__video {
overflow: hidden;
max-width: 100%;
position: relative;
vertical-align: top;
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (max-width: 600px){
.player__video{
display:none;
}
}
@media (min-width: 768px) {
.player__video {
border-radius: 50%;
}
}
@media (max-width: 767px) {
.player__video {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
max-height: 100%;
position: static;
overflow: hidden;
}
.player1
{
position: relative;
text-align: center;
cursor: pointer;
width: 100%;
height: 100%;
}
@media (max-width: 600px) {
.player1 {
overflow: hidden;
}
}
.player2 {
overflow: hidden;
max-width: 100%;
position: relative;
vertical-align: top;
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (min-width: 600px){
.player2{
display:none;
}
}
@media (min-width: 768px) {
.player2 {
border-radius: 50%;
}
}
@media (max-width: 600px) {
.player2 {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
max-height: 100%;
position: static;
overflow: hidden;
}
}