.playlist_youtube_grid {
width: 100%;
position: relative;
}
.playlist_youtube_grid .video {
width: 22%;
display: inline-block;
position: relative;
margin-left: 2%;
margin-top: 2%;
}
.playlist_youtube_grid .video .video_container {
position: relative;
}
.playlist_youtube_grid .video h3 {
height: 45px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.playlist_youtube_grid .video img.thumbnail {
width: 100%;
}
.playlist_youtube_grid .video span.video_description {
position: absolute;
bottom: 0px;
left: 0px;
padding: 10px;
width: 100%;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 18px;
height: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
box-sizing: border-box;
}
.playlist_youtube_grid .video img.play_video {
position: absolute;
left: calc(50% - 64px);
top: calc(50% - 64px);
cursor: pointer;
transition: all 0.1s linear;
opacity: 0.5;
}
.playlist_youtube_grid .video img.play_video:hover {
transform: scale(1.2);
opacity: 0.8;
}
.playlist_youtube_grid iframe {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
@media screen and (max-width: 550px) {
.playlist_youtube_grid .video {
width: 100%;
}
}