We Keep Coding

trigger a click after click element

I have a div with an img and an iframe video. I want to play the video just after click over the image. (its not valid change url for ux purposes)
My js code is not working as expected. The youtube video does not start.
$(".youtube-video img").click(function (e) {
$(".youtube-video .video").trigger('click');
ev.preventDefault();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="youtube-video">
<img src="http://i.ytimg.com/vi/<?php echo $video1 ?>/maxresdefault.jpg">
<div class="video">
<iframe frameborder="0" src="https://www.youtube.com/embed/<?php echo $video1 ?>" allowfullscreen="" style=""></iframe>
</div>
</div>

Use player.playVideo() with JQuery.
So it will be like that in javascript: document.querySelector("iframe").contentDocument.getElementsByClassName("html5-video-player")[0].playVideo()
The html5-video-player class is the class which contain the function playerVideo and we just get the iframe Dom with contentDocument. And do not forget to add ?enablejsapi=1&version=3&playerapiid=ytplayer at the end of the iframe's link.
From the Youtube player api doc

if/ else statement to find if Iframe is empty

I have an embedded youtube video on my template where the source is being dynamically pulled in, and my client wants the ability to have either an image or the youtube video in that section at their discretion.
What I'm trying to do is have code that will find if the iframes src is empty, and if it is display an image instead. I feel like I'm fairly close but I need help getting it to work.
HTML
<div class="col-sm-8 product-video-section">
<iframe id="ytplayer" width="560" height="315" src="youtubelink" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen wmode="Opaque"></iframe>
<img class="videoImg" style="display: none;" src="imgLink" />
</div>
JS
if ($('.product-video-section iframe').contents().find("body").length == 0) {
//alert("This is the IF");
}
else {
//alert("this is the ELSE");
$('.product-video-section iframe#ytplayer').remove();
$('.product-video-section .videoImg').css('display', 'block');
}
Can someone help point out where I've gone wrong?

You can test the iframe source attribute using attr
if (!$('iframe#empty').attr('src'))
{
alert('empty');
}
if (!$('iframe#notempty').attr('src'))
{
alert('empty too');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<iframe id="empty" src="">
</iframe>
<iframe id="notempty" src="www.stackoverflow.com">
</iframe>
Note if there are more than one element that matches your selection you'll need to iterate each one

Iframe that works with Div Button

I have an image that is inside a div.
The image is a play button.
On top of the image I have placed an iframe which is invisible.
When I click the image I want the iframe to appear and start playing
ok i think i found a code that is supposed to do the same thing but i cant make it work
<img src="http://www.plaisio.gr/Images/Promo/20140808-Promo-Turbo-X-Pi/turbox-pi_promo_v01_03.jpg" alt="" style="display:block;" name="video" id="video" height="272" width="495"> <iframe id="promo_video" src="" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="display:none;position:absolute;top:175px;left:344px;" frameborder="0" height="272" width="495"></iframe>
<script type="text/javascript">
$('img#video').click(function(){
$(this).parent().parent().find('#promo_video').attr('src','http://player.vimeo.com/video/102923007?autoplay=true');
$(this).parent().parent().find('#promo_video').fadeIn('slow');
})
</script>
but its not working.... any help??
i found a simmilar working example here http://www.plaisio.gr/Campaign/20140808-Turbo-x-Smartphone-P.htm

In your html you dont need the button, just add onclick="myFunction();" to your <img>
In your css you should only have display:none, not visibility: hidden
In you javascript document.getElementsByClassName("video") returns an array. Try this:
function myFunction() {
var x = document.getElementsByClassName("video")[0];
x.style.display = "block";
}
Check it out here: jsFiddle

Add a class to a div when a vimeo embed is playing

I want to add a class to a div when a vimeo embed is playing. I found some info on Vimeo API. This is the fiddle i ended up with. It works on the left video, when you play it the tester div turns red, when you pause it it turns yellow. How could i change the code so that it would work for both video's? Or to be more specific, on any number of vimeo embeds?
Just for completeness, heres the code im using:
HTML:
<iframe id="player1"
src="http://player.vimeo.com/video/27855315?api=1&player_id=player1"
width="400" height="225" frameborder="0"
webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>
<iframe id="player2"
src="http://player.vimeo.com/video/27855375?api=1&player_id=player2"
width="400" height="225" frameborder="0"
webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>
<p>Video status: <span class="status">...</span></p>
<div id="tester"></div>
CSS:
#tester{
background-color:yellow;
width:100px;
height:100px;
}
#tester.playing{
background-color:red;
}
JS/jQuery:
var iframe = $('#player1')[0],
player = $f(iframe),
status = $('.status');
// When the player is ready, add listeners for pause, finish, and playProgress
player.addEvent('ready', function() {
status.text('ready');
player.addEvent('pause', onPause);
player.addEvent('finish', onFinish);
player.addEvent('playProgress', onPlayProgress);
});
// Call the API when a button is pressed
$('button').bind('click', function() {
player.api($(this).text().toLowerCase());
});
function onPause(id) {
$('#tester').removeClass('playing');
}
function onFinish(id) {
$('#tester').removeClass('playing');
}
function onPlayProgress(data, id) {
$('#tester').addClass('playing');
}
Update:
Im adding the vimeo's dynamically to an empty iframe. This is where the problem arises of the solution not working anymore. To clarify things ive putted 2 fiddles together.
This fiddle works. When you play the video the yellow tester div turns red.
This fiddle doesnt work. First click the green "video 1" button, then the player shows. But when you press play on it the yellow tester div doesnt turn red.
I cant figure out what the problem is. When i inspect element, both iframes look exactly the same when they are rendered. Whats the difference and why doenst it work when i load the src dynamically?

You can add a class to all of the player iframes so in the code you just need to check if the player has the class or not and change whatever you want to.
Also it looks like you have to define the players in js as well and bind the event each time. There might be better ways to do this but I just looked at the code and came up with this
http://jsfiddle.net/HfwWY/2558/
<iframe id="player1" class="change" src="http://player.vimeo.com/video/27855315?api=1&player_id=player1" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<iframe id="player2" class="change" src="http://player.vimeo.com/video/27855375?api=1&player_id=player2" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
JS
var iframe = $('.change');
iframe.each( function() {
var player = $f( $(this)[0] );
// When the player is ready, add listeners for pause, finish, and playProgress
player.addEvent('ready', function() {
status.text('ready');
player.addEvent('pause', onPause);
player.addEvent('finish', onFinish);
player.addEvent('playProgress', onPlayProgress);
});
} );
var status = $('.status');
Feel free to change the class change to something more meaningful like videoPlayer or whatever, just make sure the change is applied in js as well

How to make a play and pause button?

I am trying to make a play and pause button
HTML:
<img id="change" src="../play button.png" width="100" height="100" /><script src="../jquery.js"></script>
<div id ="video">
</div>
Jquery:
$('#change').click(function () {
$('#video').html('<iframe width="0" height="0" src="//www.youtube.com/embed/....?autoplay=1" frameborder="0" allowfullscreen></iframe>');
});
$(function() {
$('#change').click(function(){
$("#change").attr('src',"../pause button.png");
});
});
At the moment when you click on the play button it changes to a pause button img. And open a youtube video that opens hidden so that you can just hear the audio. I am looking to then; when you click the second time remove the html for the youtube video (So that it stops playing [or if you are feeling helpful you can help me find a way to make the video pause]) and then put the play button img back?