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
Related
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
Im trying to add youtube video in my webpage using below mentioned code, is
there anyone who can help me with that.? have a look on my code below.
<div style="width:400px; height:200px;">
<embed src="https://www.youtube.com/watch?v=Q-AV9KMLTFc" wmode="transparent"
type="application/x-shockwave-flash" width="100%" height="100%"
allowfullscreen="true" title="Adobe Flash Player">
</div>
Use the code that Youtube generates for you after clicking share > embed. It looks like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/Q-AV9KMLTFc" frameborder="0" allowfullscreen></iframe>
Set width and height to whatever values you like.
You could do it with <iframe> like this:
<iframe width="500" height="500"
src="https://www.youtube.com/embed/vEROU2XtPR8">
</iframe>
With Autoplay:
<iframe width="500" height="500"
src="https://www.youtube.com/embed/vEROU2XtPR8?autoplay=1">
</iframe>
Note: After "embed/" in src, be sure to write the correct youtube video id which can be found in the URL link after "=" symbol.
Ex: In this link, https://www.youtube.com/watch?v=vEROU2XtPR8
Youtube video id="vEROU2XtPR8".
Be sure to give the width and height properties of the video size that should be displayed on the screen.
I am trying to insert a youtube video with a custom thumbnail to my website. Therefore I found this code, which I am using.
<div onclick="this.nextElementSibling.style.display='block'; this.style.display='none'">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=myImage" style="cursor:pointer" />
</div>
<div style="display:none">
<iframe width="420" height="315" src="https://www.youtube.com/embed/TlMNLFiARBA?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
It works so far, but the autoplay makes the video play behind the cover image. So I've tried to add the autoplay parameter onClick, so it changes to true as the cover hides.
I have tried to use
<div onclick="this.nextElementSibling.style.display='block';this.nextElementSibling.href + '?rel=0&autoplay=1'; this.style.display='none'">
But this isn't working. To be honest, I have no background in JS and do not know what I am doing. Could anybody please help me with this? Just adding a URL parameter to a given Link onClick.
thank you.
I think you are not doing things the right way.
when you change the url of the iframe, the iframe will reload, not just start to play.
try this:
<div onclick="this.nextElementSibling.style.display='block';this.nextElementSibling.children[0].src='https://www.youtube.com/embed/TlMNLFiARBA?rel=0&autoplay=1'; this.style.display='none'">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=myImage" style="cursor:pointer" />
</div>
<div style="display:none">
<iframe width="420" height="315" frameborder="0" allowfullscreen>
</iframe>
</div>
this will show the iframe and change the url the same time.
I'm trying to create popup with Vimeo video inside. I have div on my page with id="showVideo". On click on that div I want to open popup (new div with id="opened-video" ). Div with id="opened-video" have iframe of Viemo video that looks like this
<iframe id="video-iframe" src="https://player.vimeo.com/video/102895556?autoplay=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
This iframe is set to auto play using ?autoplay=1 parameter in src url.
This is my JavaScript
jQuery(document).ready(function(){
jQuery('#showVideo').click(function() {
jQuery('#opened-video').fadeIn().html('<iframe id="video-iframe" src="https://player.vimeo.com/video/102895556?autoplay=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><img src="<?php echo get_template_directory_uri()?>/images/resp-menu-close.png" alt="Close video" onClick="closeDiv()" id="close-video" />');
});
});
and this works.
You will notice image tag in html() function, that's image that is used to close id="opened-video" and I do that with Javascript function
function closeDiv() {
document.getElementById('opened-video').style.display = "none";
}
and this works too, but with one problem, opened-video is set to display="none" but Vimeo video is still playing in background, I hear sound. How to stop video working when I press on id="close-video" image? How I can remove src parameter ?autoplay=1 when I click on image? Or any other suggestion?
This is HTML
<img src="<?php echo get_template_directory_uri()?>/images/play-real.png" alt="Play real" id="showVideo" />
<div class="video-front" id="opened-video">
</div>
Inside your closeDiv() function, insert these two lines after making the display none,
$('iframe').attr('src', "");
$('iframe').attr('src', $('iframe').attr('src'));
So that it will look like,
function closeDiv() {
document.getElementById('opened-video').style.display = "none";
// Removes the src
$('iframe').attr('src', "");
// Reloads the src so that it can be played again
$('iframe').attr('src', $('iframe').attr('src'));
}
Working DEMO
I've something like this
<div draggable="true">
<iframe width="640" height="360" src="http://www.youtube.com/watch?v=dQw4w9WgXcQ?fs=1&feature=oembed" frameborder="0" allowfullscreen="">
</iframe>
</div>
and I want to be able to drag the entire div when I start the drag by clicking anywhere on the div including the iframe. However the iframe doesn't cascade the event. I also want to keep the interactions with the youtube video possible (play, fullscreen, etc).
Does anyone have any idea how to do this with html/css/js/jQuery?
here you have a near example you want....just fix it a little
#dra
{
width:560px;
height:315px;
border:1px solid green;
cursor:pointer;
}
#dra:hover iframe
{
z-index:-1;position:absolute;
}
<div id="dra"><iframe width="560" height="315" src="http://www.youtube.com/embed/T6s3d2wdXVg" frameborder="0" allowfullscreen></iframe></div>
<script>
$( "#dra" ).draggable({stop: function() {
$( "iframe" ).css('z-index','0');
}});
</script>