CODEWITHSUNDEEP
javascripthtmlcssangularjs
MrSpeed Art
MrSpeed Art

Reputation: 15

Youtube video div overlay glitch

I'm trying to cover a video with a div so it's not visible. Then when you hover over the div it's heigth shrinks to let the video controls visible.

I don't know why I get this weird glitch: https://i.gyazo.com/aff58e50903009f7515a9cbd9b045f91.mp4

This is the slice with the video and overlay in question:

        <div class="ytsound-cover" ng-class="{'ytsound-cover-lower': hover, 'ytsound-cover': !hover}" ng-mouseenter="hover = true" ng-mouseleave="hover = false" id="cover">
        </div>
        <div id="ytsound">
            <iframe width="300" height="250" src="//www.youtube.com/embed/TbsBEb1ZxWA?autoplay=1&loop=1&playlist=TbsBEb1ZxWA&showinfo=0&start=65" frameborder="0" allowfullscreen></iframe>
        </div>

Style here:

.ytsound-cover{
        background: #fff;
        height: 250px;
        position: absolute;
        width: 301px;
}
.ytsound-cover-lower {
        background: #fff;
        height: 205px;
        position: absolute;
        width: 301px;
}

Whole thing is loaded inside an ng-view.

But anyway, here is all the source code, I'm hosting it on github: https://github.com/Vacanor/gifsound

I'd love some pointing towards why that is happening.

PD: I don't know if it does have any effect but I use flexbox

Upvotes: 0

Views: 194

Answers (1)

Aditya Krishna Namdeo
Aditya Krishna Namdeo

Reputation: 79

try wrapping these divs by another div just like below-

<div class="main-cover">    
<div class="ytsound-cover" id="cover"></div>
<div id="ytsound">
    <iframe width="300" height="250" src="//www.youtube.com/embed/TbsBEb1ZxWA?autoplay=1&loop=1&playlist=TbsBEb1ZxWA&showinfo=0&start=65" frameborder="0" allowfullscreen></iframe>
</div>

</div>

make style like-

.main-cover{
position:relative;
height:250px;
width:301px;
}
.ytsound-cover{
    background: #fff;
    height: 250px;
    position: absolute;
    width: 301px;
}
.main-cover:hover .ytsound-cover{
     height:205px
 }

Upvotes: 1

Related Questions