Uncaught TypeError cannot set property 'src' of null onclick

1
votes

I am trying to have a light box pop up for videos. it works fine with one video. When trying with multiple videos the 2nd video link dont work. When clicked I get Uncaught TypeError cannot set property 'src' of null. Nothing happens when clicked but video1 starts in the background you cant see it only her the sound. Any help is appreciated.

here goes JS

// Function to reveal lightbox and adding YouTube autoplay
function revealVideo(div,video_id) {
  var video = document.getElementById(video_id).src;
  document.getElementById(video_id).src = video+'&autoplay=1'; // adding autoplay to the URL
  document.getElementById(div).style.display = 'block';
}

// Hiding the lightbox and removing YouTube autoplay
function hideVideo(div,video_id) {
  var video = document.getElementById(video_id).src;
  var cleaned = video.replace('&autoplay=1',''); // removing autoplay form url
  document.getElementById(video_id).src = cleaned;
  document.getElementById(div).style.display = 'none';
}

here goes html

    <a id="playme" onclick="revealVideo('video','youtube')" title="Read more"><img alt="The Boys & Girls Club" src="./content/uploads/2017/02/myimage.jpg" style="max-width:100%;max-height:100%"></a>
    <a id="playme" onclick="revealVideo('video','youtube')" title="Read more"><img alt="The Boys & Girls Club 2" src="./content/uploads/2017/02/myimage2.jpg" style="max-width:100%;max-height:100%"></a>

    <div class="lightbox" id="video" onclick="hideVideo('video','youtube')">
        <div class="lightbox-container">
            <div class="lightbox-content">
                <button class="lightbox-close" onclick="hideVideo('video','youtube')">Close | X</button>
                <div class="video-container">
                    <iframe allowfullscreen height="720" id="youtube" name="youtube" src="https://www.youtube.com/embed/xxxxxx?rel=0&amp;controls=1&amp;showinfo=0%20frameborder=0" width="1280"></iframe>
                </div>
            </div>
        </div>
    </div>
    <div class="lightbox" id="video" onclick="hideVideo('video','youtube')">
        <div class="lightbox-container">
            <div class="lightbox-content">
                <button class="lightbox-close" onclick="hideVideo('video','youtube')">Close | X</button>
                <div class="video-container">
                    <iframe allowfullscreen height="720" id="youtube" name="youtube" src="https://www.youtube.com/embed/xxxxxx?rel=0&amp;showinfo=0%20frameborder=0" width="1280"></iframe>
                </div>
            </div>
        </div>
    </div>
2
javascripthtml
Well, your two divs have the same id. And you're asking the document.getElementById to get you an element with the id 'youtube', which doesn't exist. So yeah, it's gonna barf. – Snowmonkey
just use element.addEventListener("click",function(){}). Inline html event listeners are considered bad practice. – Marc Guiselin
id="youtube" also exists twice. Do not use the same ID multiple times. – Sebastian Simon

2 Answers

0
votes

I think your problem here is that you're using IDs multiple times.
You got id="playme" on both anchor-tags and id="video" on both lightbox-divs.

0
votes

So yeah. First, you should really only need a single video player -- simply change the src of that player and it should do what you want. The following is messy and ugly and really not the way i'd necessarily do this, but it works. Rather than having multiple lightbox/player elements, there's one. When you click the link, the onClick passes an id, which is matched against an array of objects. If a match is found, it changes the src of a SINGLE video-player element to the matched src and displays it.

From what I'm reading, this may be closer to what you're looking for.

  var arrayOfVideos = [{
    id: 'youtube',
    src: "https://www.youtube.com/embed/xxxxxx?rel=0&amp;controls=1&amp;showinfo=0%20frameborder=0"
  }, {
    id: 'youtube2',
    src: "https://www.youtube.com/embed/xxxxxx?rel=0&amp;controls=1&amp;showinfo=0%20frameborder=0"
  }];

// Function to reveal lightbox and adding YouTube autoplay
revealVideo = function revealVideo(div, video_id) {
  // This just shows what we're displaying, purely for debugging.
  console.log("Showing the video "+video_id);
  // We have a single videoplayer div. We'll simply toggle its src.
  var video = document.getElementById("video-player");
  // All possible links have been saved as an array of ids and src properties.
  //  Here, we simply get the first element with the matching id
  var videoObject = arrayOfVideos.filter(function(obj) {
    return obj.id === video_id;
  })
  video.src = videoObject[0].src+'&autoplay=1'; // Adding autoplay to the URL
  document.getElementById(div).style.display = 'block';
  
}

// Hiding the lightbox and removing YouTube autoplay
hideVideo = function hideVideo(div, video_id) {
  var video = document.getElementById("video-player");
  var cleaned = video.src.replace('&autoplay=1', ''); // removing autoplay form url
  video.src = cleaned;
  document.getElementById(div).style.display = 'none';
}
<a id="playme" onclick="revealVideo('video','youtube')" title="Read more"><img alt="The Boys & Girls Club" src="./content/uploads/2017/02/myimage.jpg" style="max-width:100%;max-height:100%"></a>
<a id="playme" onclick="revealVideo('video','youtube2')" title="Read more"><img alt="The Boys & Girls Club 2" src="./content/uploads/2017/02/myimage2.jpg"></a>
<div class="lightbox" id="video" onclick="hideVideo('video','youtube')">
  <div class="lightbox-container">
    <div class="lightbox-content">
      <button class="lightbox-close" onclick="hideVideo('video','youtube')">Close | X</button>
      <div class="video-container">
        <iframe allowfullscreen height="720" id="video-player" src="" width="1280"></iframe>
      </div>
    </div>
  </div>
</div>