Element in DOM not responding to addEventListener in JavaScript

Question

Essentially I am trying to populate the iframe which is nested in the section tags, from this data structure I have.

HTML:

<div id="container-fluid--secondary" class="container-fluid container-fluid--secondary">
   <section class="a">
      <header>...more stuff that's not important</header>
     <iframe src="" width="790" height="444" frameborder="0" webkitallowfullscreen
            mozallowfullscreen allowfullscreen>
    </iframe>
      <div class="video-container">
         <img class="video-container__thumbnail" src="https://via.placeholder.com/250x141.png?text=Video Thumbnail 250px x 141px" alt="Video thumbnail">
         <img class="video-container__thumbnail" src="https://via.placeholder.com/250x141.png?text=Video Thumbnail 250px x 141px"
            alt="Video thumbnail">
         <img class="video-container__thumbnail" src="https://via.placeholder.com/250x141.png?text=Video Thumbnail 250px x 141px"
            alt="Video thumbnail">
      </div>
   </section>
   <section class="b">
      <header>...more stuff that's not important</header>
      <iframe src="" width="790" height="444" frameborder="0" webkitallowfullscreen
            mozallowfullscreen allowfullscreen>
    </iframe>
      <div class="video-container">
         <img class="video-container__thumbnail" src="https://via.placeholder.com/250x141.png?text=Video Thumbnail 250px x 141px"
            alt="Video thumbnail">
         <img class="video-container__thumbnail" src="https://via.placeholder.com/250x141.png?text=Video Thumbnail 250px x 141px"
            alt="Video thumbnail">
         <img class="video-container__thumbnail" src="https://via.placeholder.com/250x141.png?text=Video Thumbnail 250px x 141px"
            alt="Video thumbnail">
      </div>
   </section>
</div>

JS:

var videos = {
    'a': [
        {
            'name': 'a',
            'src': 'https://foo/video/',
            'thumb': 'images/foo.png'
        },
        {
            'name': 'b',
            'src': 'https://bar/video/',
            'thumb': 'images/bar-10.png'

        },
        {
            'name': 'c',
            'src': 'https://baz/video/',
            'thumb': 'images/baz.png'
        }
    ],
    'b': [
        {
            'name': 'a',
            'src': 'https://fizz/video/',
            'thumb': 'images/fiz.png'

        },
        {
            'name': 'b',
            'src': 'https://buzz/video/',
            'thumb': 'images/buzz.png'

        },
        {
            'name': 'c',
            'src': 'https://blargh/video/',
            'thumb': 'images/blargh.png'


        }
    ]
},

var containerFluidSecondary = document.getElementById('container-fluid--secondary');
      var videoNames = Object.keys(videos);

          containerFluidSecondary.querySelectorAll('section').forEach(function (section, i) {
            if (section.className == videoNames[i]) {

              var videoContainer = [...section.getElementsByClassName('video-container')[0].children];
              var vids = videos[section.className];

                videoContainer.forEach(function (img, i) {
                 img.src = vids[i].thumb

                 img.addEventListener('click', function(){
                   console.log(section.getElementsByTagName('iframe').src = vids[i].src);
                 },false);
                })
           }
        })

This logs out the the iframe with the new source but why won't it populate in the iframe?

img.addEventListener('click', function(){
    console.log(section.getElementsByTagName('iframe').src = vids[i].src);
},false);