Trigger youtube video from custom img with ng-click? (angular.js)

JavaScript
1

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

2

Just a tip with these angular questions: if you make a jsfiddle demonstrating the problem you are having, you’re much more likely to get a response : )

1 Like
3

Hi there ReGGaeBOSS,

to stop auto-playing remove this…

?list=PL_pZGFQt5xztRS5lbCQi3DbPrbG2Ms6B5?rel=0&autoplay=1

…from the iframe src attribute.

coothead

4

Okey but I want the video to play when i click the image, how can I do this?

5

Hi there ReGGaeBOSS,

here is a basic example for you to try…

[code]

untitled document #iframe-holder { position:relative; width:600px; height:400px; margin:auto; box-shadow:10px 10px 10px #999; } #the-iframe,#cover { width:100%; height:100%; border:0; cursor:pointer; } .hide { display:none; } .show { display:block; }
[/code]

coothead

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.