HTML CSS et JS : site avec post-it et lightbox, problemes

Bonjour,

J'aurai besoin d'un peu d'aide externe car je suis bloqué sur ce code depuis 2-3 jours ^^'.

En fait, je suis sensé faire un site web qui contient des post-its. En passant le curseur sur le post-it il y a une petite animation de zoom et quand je clique dessus c'est sensé lancer une vidéo. Cependant, j'ai des soucis avec la balise <a> qui se ferme automatiquement (comme si je ne pouvais pas mettre une balise <a> dans une balise <a>) est-ce qu'il y aurait une alternative ?

Merci d'avance à ceux qui consacreront du temps pour trouver cette solution :)

HTML

<ul>
    <li>
        <a href="#"  id="sticky">
            <a  onclick="lightbox_open();">
                <h4>Business Services</h4>
        <div id="light">
            <a class="boxclose" id="boxclose" onclick="lightbox_close();"></a>
            <video id="VisaChipCardVideo" width="800" controls>
            <source src="video.mp4" type="video/mp4">
                    </video>
        </div>
        <div id="fade" onClick="lightbox_close();"></div>
        <p></p>
            </a>
        </a>
    </li>
</ul>

CSS

#sticky{
  text-decoration:none;
  color:#000;
  background:#ffc;
  display:block;
  height:7em;
  width:7em;
  padding:1em;
  /* Firefox */
  -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
  /* Safari+Chrome */
  -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  /* Opera */
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
   -moz-transition:-moz-transform .15s linear;
  -o-transition:-o-transform .15s linear;
  -webkit-transition:-webkit-transform .15s linear;
}
 
 
 
 
 
 
 
 
 
 
ul li{
  margin:1em;
  float:left;
}
 
ul li:nth-child(1n) #sticky{
  -o-transform:rotate(4deg);
  -webkit-transform:rotate(4deg);
  -moz-transform:rotate(4deg);
  position:relative;
  top:5px;
  background:#cfc;
}
 
ul li:nth-child(2n) #sticky{
  -o-transform:rotate(4deg);
  -webkit-transform:rotate(4deg);
  -moz-transform:rotate(4deg);
  position:relative;
  top:5px;
  background:#ffc;
}
 
ul li:nth-child(3n) #sticky{
  -o-transform:rotate(-3deg);
  -webkit-transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
  position:relative;
  top:-5px;
  background:#FAAFBE;
}
 
 
ul li:nth-child(4n) #sticky{
  -o-transform:rotate(5deg);
  -webkit-transform:rotate(5deg);
  -moz-transform:rotate(5deg);
  position:relative;
  top:-10px;
  background:#ccf;
}
 
 
#sticky:hover,#sticky:focus{
  -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
  box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  position:relative;
  z-index:5;
}
 
 
 
 
 
 
 
 
#fade {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}
 
#light {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 900px;
  max-height: 540px;
  margin-left: -400px;
  margin-top: -180px;
  border: 2px solid #FFF;
  background: #FFF;
  z-index: 1002;
  overflow: visible;
}
 
#boxclose {
  float: right;
  cursor: pointer;
  color: #fff;
  border: 1px solid #AEAEAE;
  border-radius: 3px;
  background: #222222;
  font-size: 31px;
  font-weight: bold;
  display: inline-block;
  line-height: 0px;
  padding: 11px 3px;
  position: absolute;
  right: 2px;
  top: 2px;
  z-index: 1002;
  opacity: 0.9;
}
 
.boxclose:before {
  content: "×";
}
 
#fade:hover ~ #boxclose {
  display:none;
}
 
.test:hover ~ .test2 {
  display: none;
}

JS

window.document.onkeydown = function(e) {
  if (!e) {
    e = event;
  }
  if (e.keyCode == 27) {
    lightbox_close();
  }
}
 
function lightbox_open() {
  var lightBoxVideo = document.getElementById("VisaChipCardVideo");
  window.scrollTo(0, 0);
  document.getElementById('light').style.display = 'block';
  document.getElementById('fade').style.display = 'block';
  lightBoxVideo.play();
}
 
function lightbox_close() {
  var lightBoxVideo = document.getElementById("VisaChipCardVideo");
  document.getElementById('light').style.display = 'none';
  document.getElementById('fade').style.display = 'none';
  lightBoxVideo.pause();
}