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
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
When a page initially loads I have a hidden iframe and other visible ones. Then when a button is clicked I need to hide one that was previously visible, then unhide another (actually I need to set the src attribute too on the one that is becoming visible, but I'll tackle that next). I don't want to refresh the entire page (hence the return false below).
The code below does not display the red iframe2 upon the button click. Can you tell me why?
<form>
<h1>Test</h1>
<input type="submit" id="search" value="Search" />
</form>
<iframe id="frame0" style="background-color: blue" height="200" width="800" ></iframe>
<iframe id="frame1" style="background-color: yellow" height="200" width="800" ></iframe>
<iframe id="frame2" style="visibility: hidden; background-color: red" height="200" width="800" ></iframe>
<script type="text/javascript">
$(document).ready(function(){
$( "#search" ).click(function(event) {
$("#frame1").hide();
$("#frame2").show();
$('#frame2')[0].contentWindow.location.reload(true);
return false;
});
});
</script>
User disply insted of visibility edit, your frame2 as below :
<iframe id="frame2" style="display: hidden; background-color: red" height="200" width="800" ></iframe>
Here is working jsfiddle :
https://jsfiddle.net/keval/vqyczm7a
jQuery's .show() and.hide() work with the CSS display property, as oppose to the visibility property.
.show() = css('display', 'block')
.hide() = css('display', 'none')
However, you can use .toggle() to either hide or show an element based on it's current state. I think this is what you would require, as you'd like to hide the one that was previously visible.
You'd need to change your iframe visibility style to use display instead
<iframe id="frame2" style="display: none; background-color: red" height="200" width="800" ></iframe>
Then instead of showing and hiding the iframes, use .toggle()
$( "#search" ).click(function(event) {
$("#frame1").toggle();
$("#frame2").toggle();
$('#frame2')[0].contentWindow.location.reload(true);
return false;
});
See my working example: https://jsfiddle.net/o2gxgz9r/14250/
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 have an image that I want the user to see. When the user clicks on this image I want the image to go away and have the video show in it's place. Can someone show me how to do this?
Here is the code I have so far.
<div id="homeflash" style="height:413px; background-image:url(../../../upload/1/img/homeFlashBG.jpg);">
<a href="#">
<img src="../../../upload/1/img/video.jpg" style="display:none" />
</a>
<div id="video" style="display:inline">
<iframe allowfullscreen="" frameborder="0" height="395" src="//www.youtube.com/embed/X8mLel_werQ?rel=0" width="691"></iframe>
</div>
</div>
If someone could edit my post to clean the code up that would be great. I can't figure it out.
To describe the code a little bit:
This is what the code should look like after I click on the image. When you first see the page, the two display styles will be reversed.
Any help will be awesome.
Thanks
A general Idea can be like this:
$(function() {
$("img").click(function() {
$(this).css("display","none"); // will hide your image
$("body").append("<div id='video'></div>"); // will append div with id video, this div should have video code inside this.
});
});
You want to hide the video initially, so give it the style display:none. You also want to give your thumbnail image an id so you can reference it in jQuery. You can also remove the <a> tag from around the image (its not needed)
HTML
<div id="homeflash" style="height:413px; background-image:url(../../../upload/1/img/homeFlashBG.jpg);">
<img id="thumbnail" src="../../../upload/1/img/video.jpg" />
<div id="video" style="display:none">
<iframe allowfullscreen="" frameborder="0" height="395" src="//www.youtube.com/embed/X8mLel_werQ?rel=0" width="691"></iframe>
</div>
</div>
JavaScript
$(document).ready(function(){
$("#thumbnail").click(function(){
$(this).hide()
$("#video").show()
})
})
I would also try to avoid adding CSS styles inline if you can
I'm currently trying to implement a content locking system to my site and as part of it would like to lock out an on-site mp3 player until the user has completed an offer.
So when the page loads it shows the player, but if they try to click on it, it pops up the content locker and once they've completed an offer it swaps the DIV for the fully usable player.
here's the code:
<div id="mobmp3">
<div id="yoursecDiv" style="display:block; z-index: 999;"> <a href="javascript:void(0)" onclick="var fileref=document.createElement('script');fileref.setAttribute('type','text/javascript'); fileref.setAttribute('src', 'http://c.themixtapesite.com/locker.js?guid=0512eafd69b18d22');document.body.appendChild(fileref); setTimeout(yourFunction, 3000);">
<iframe src="http://themixtapesite.com/wp-content/plugins/amazon-s3-cloud-mp3-player/html5/html5mob2.php?bucket=mixtape2" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="97.4%" height="280" max-width="97.4%">
</iframe>
</a>
</div>
</div>
<!-- Place the Real Link within yourfirDiv which is set to not display
until yourFunction has been executed. -->
<div id="yourfirDiv" style="display:none;">
<iframe src="http://themixtapesite.com/wp-content/plugins/amazon-s3-cloud-mp3-player/html5/html5mob2.php?bucket=mixtape2"
frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="97.4%"
height="280" max-width="97.4%"></iframe>
</div>
So, as you can see, i'm trying to load up an iframe (the player) within yoursecDiv. then once they've completed the offer it reloads yourfirDiv which is the same player but without the content locker.
I was hoping by wrapping the <iframe> in the <a> tag i would achieve this, but alas, it doesn't work.
So i guess my question is:
Is there a way i can overlay a div (or something) over the iframe to act as the link to open the content locker?
this is now solved... after a bit of fresh air my brain started working and i simply used a transparent gif that i overlayed over the div. then set that gif as the trigger link.