0

You kind of see my lame attempt by trying to wrap the div inside of an anchor tag. Is it possible to add a zone abouve the video for when the user clicks on it, it automically brings up a new browser tab with a new webpage.

<style>
#player {
margin: auto;
width: 400px;
height: 273px;
}
.playerclick{
target-name:new;
target-new:tab;
}
</style>    

<a href="http://www.elmariachimexican.com" target="_blank"> <div id="player"></div> </a>
<script>      
  var tag = document.createElement('script');
  tag.src = "http://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      playerVars: { 'autoplay': 1, 'controls': 1, 'modestbranding':1, 'autohide':1,'wmode':'opaque', 'rel':0, 'showinfo':0},
      videoId: 'mO03zQQ8XIo',
      events: {
        'onReady': onPlayerReady}
    });
  }
  function onPlayerReady(event) {
    event.target.mute();
  }
  </script>
user51843
  • 11
  • 4

1 Answers1

0

You can put another div over iframe video and set click event there. See here.

<a href="http://www.elmariachimexican.com" target="_blank"> 
    <div style="position:absolute;width:273px;height:400px"></div>
    <div id="player"></div> 
</a>

Also the adding of video to page doesn't seem to work, so I changed it little bit.

var tag = document.createElement('script');
  tag.src = "http://www.youtube.com/player_api";

  document.getElementById("player").appendChild(tag);

See working example here

Community
  • 1
  • 1
ThePavolC
  • 1,693
  • 1
  • 16
  • 26