.liner-line {
left: 7px;
position: relative;
transition: left 0.4s ease-in-out;
}
.boxs .box-liner .box {
left: 3px;
z-index: 2;
width: 294px;
height: 163px;
padding: 0 0 0;
position: relative;
text-align: center;
margin: 0 14px 20px 0;
border: 1px solid #efeff0;
transition: box-shadow .3s ease-in-out;
-o-transition: -o-box-shadow .3s ease-in-out;
-ms-transition: -ms-box-shadow .3s ease-in-out;
-moz-transition: -moz-box-shadow .3s ease-in-out;
-webkit-transition: -webkit-box-shadow .3s ease-in-out;
}
.div_to_be_hidden {
z-index: 3;
top: 127px;
height: 36px;
width: 293px;
position: absolute;
background: rgba(45, 0, 255, 0.56);
}
.liner {
height: 185px;
position: relative;
white-space: nowrap;
}
.font {
left: 230px;
z-index: 8;
width: 52px;
bottom: 26px;
height: 27px;
position: absolute;
border-radius: 30px;
display: inline-block;
background: rgba(241, 239, 239, 0.2);
}
.liner-next {
z-index: 8;
right: -4px;
bottom: 4px;
background-position: 0 0px;
-o-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-webkit-transition: all 0.3s ease-out;
}
.liner .font .liner-prev.disable {
opacity: 0.3;
cursor: default;
}
.liner .font .liner-prev {
z-index: 8;
right: 9px;
bottom: 4px;
background-position: 0 0px;
-o-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-webkit-transition: all 0.3s ease-out;
}
.liner .font .liner-next {
top: 7px;
right: 6px;
position: absolute;
display: inline-block;
background-color: #fff;
width: 16px;
height: 13px;
cursor: pointer;
}
.liner .font .liner-prev {
top: 7px;
right: 31px;
position: absolute;
display: inline-block;
background-color: #fff;
width: 16px;
height: 13px;
cursor: pointer;
}
.news_span {
top: 7px;
left: 24px;
color: #FFFFFF;
position: absolute;
font: 14px/16px 'Roboto-Regular', sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="liner">
<div class="font">
<span class="mad liner-next"></span>
<span class="liner-prev disable"></span>
</div>
<div class="liner-line">
<div class="box blocks" data-id="1">
<div class="div_to_be_hidden">
<span class="news_span"> Выпуск 1</span>
</div>
<iframe width="294" height="163" src="https://www.youtube.com/embed/QuIwUTO0H7M?showinfo=0" frameborder="0" allowfullscreen=""> </iframe>
</div>
</div>
</div>
Вопрос такой,как, когда пользователь нажимает воспроизвести видео блок div_to_be_hidden
нужно скрыть, при паузе - снова показать?