Hi,
I want to play a video by clicking a custom video thumbnail. This is my code:
<div class="post">
<div class="video-cover" ng-click="video = !video" ng-hide="video">
<img src="img/splash.jpg" />
</div>
<div class="video" ng-show="video">
<iframe width="" height="" src="https://www.youtube.com/embed/i4h5QN5sqQk?list=PL_pZGFQt5xztRS5lbCQi3DbPrbG2Ms6B5?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
</div>
CSS/SASS:
.video-cover{
position: relative;
padding-bottom: 75%;
height: 0;
}
.video{
position: relative;
padding-bottom: 75%;
height: 0;
iframe, object, embed{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
}
But the video autoplays “under” the img before the video-cover is clicked.
How can I solve this?
And also another question regarding ng-click/ng-show/ng-hide:
If I have multiple posts with the same code as above, how can i make the ng-click to only trigger the ng-hide on itself and ng-show on its sibling? Similar to jquery (this) och (this).sibling