Basically, is there a way to make an image/div "invisible" in the sense that user click passes right through it to div beneath it in z-space?
Example is Youtube video in iframe, but want custom play button. Catch is that it must be user pressing the native play button that initiates play. It cannot be triggered via js api or any automated method. So... essentially need to have user see the image, but have it act as if it is not there when user clicks.
Any suggestions?
EDIT 04-22-2015
Regarding your comment:
We can read in the doc that player.playVideo() don't count toward incremental YouTube brand channel video views. Only the native button play will work for this.
In fact we can read on the doc :
player.playVideo():Void Plays the currently cued/loaded video. The final player state after this function executes will be playing (1).
Note: A playback only counts toward a video's official view count if it is initiated via a native play button in the player.
source: https://developers.google.com/youtube/iframe_api_reference#playVideo
This information is confirmed by the official YouTube support
Part: YouTube public play count
The YouTube Video Player allows masthead video views to count directly toward overall YouTube brand channel video views. For the YouTube view to count, the user must click to start the video using the standard YouTube play button. Autoplay videos don't count toward YouTube views.
Part:Standard VS chromeless
The chromeless YouTube Player lets you customize features like player controls, while still pulling in YouTube-served videos. Aside from the standard play button overlay, clicks on the chromeless player's custom control buttons don't count toward incremental YouTube brand channel video views.
source: https://support.google.com/richmedia/answer/2566092?hl=en
So i made a new solution with function hide() and show() of Jquery. With this solution, the user will click on the native button player and if the video is not playing there is an image head-on.
You need to use the element, and not the API
HTML
$(".player-video").mouseenter(function() {
$('.player-video').hide();
$('#player').show();
});
$("#player").mouseleave(function() {
$('.player-video').show();
$('#player').hide();
});
Javacript
<iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/l-gQLqv9f4o" frameborder="0" allowfullscreen style="display:none"></iframe>
<div class="player-video">
</div>
Im made you another live example: http://jsbin.com/luqewajuse/1/edit?html,js,console,output
END EDIT
You can use:
<div id="player"></div>
<button class="play-video">Play</button> //can be button or whatever
$(".play-video").click(function() {
player.playVideo();
}
EDIT 31/01/2015
Regarding your comments and what you trying to do, i make you a live demo to show you how it work :
Live demo : http://jsbin.com/jefubusejo/2/edit?html,js,output
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.player-video {
width: 600px;
height: 340px;
background-image:url('http://www.hqsoul.com/wp-content/uploads/2014/11/Mark-Ronson-Uptown-Funk-ft.-Bruno-Mars.jpg');
}
</style>
</head>
<body>
<div id="player" style="display:none"></div>
<div class="player-video">
</div>
</body>
</html>
Javascript:
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
$(".player-video").click(function() {
$('.player-video').hide();
$('#player').show();
onPlayerReady();
});
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'l-gQLqv9f4o',
events: {
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady() {
player.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
function myclick() { console.log("Click") } #front, #back {
position:absolute;
top:10px;
left:10px;
border:1px solid black;
width:100px;
height:100px;
}
#front {
width:80px;
border-radius:30px;
z-index:1;
border-color:red;
}<div id="back" onclick="myclick()" >
<div id="front"></div>
</div>
<p id='this-tag'></p>