CODEWITHSUNDEEP
javascripthtmlyoutubemagnific-popup
DucksWearDogMasks
DucksWearDogMasks

Reputation: 11

How to use the same iframe script with multiple sources?

First of all I'm a total noob so code might be harsh.

With that said, I have a page with several images (thumbnails) that I want to make clickable so that they enlarge and display their own embedded YouTube video. I use Magnific Pop-Up for the aesthetic of the whole thing.

I succeeded in doing exactly what I want but it obviously only works for one source, so I'd like to know what's the best way to have a unique script targetting several sources (depending on the clicked item)?

Here's an example (all sensitive values are redacted for privacy reasons):

$('.container').on('click', function () {
    $.magnificPopup.open({
        items: {
            src: '<iframe width="560" height="315" src="https://www.youtube.com/embed/video-url" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
            type: 'iframe'
        }
    });
});
                    <div class="container">
                        <img src="thumbnail.jpg" alt="Video 1">
                        <a target="_blank" rel="noopener noreferrer">
                        <div class="overlay"></div>
                    </div>

The iframe is in the script because otherwise it'd clearly display both the images and the embedded players in an unordoned manner, and I want the embedded player to stay hidden unless an image is clicked, only then the popup opens and display the YouTube player.

Thanks in advance for your help!

EDIT: Each image matches a single embedded video, on click it's not supposed to play a random video, only the corresponding one.

Upvotes: 1

Views: 966

Answers (1)

Blind Spot
Blind Spot

Reputation: 191

For creating one image for one video and specific url, you also need a div for each of them. Here, I have created an array of objects in javascript named links, which contains all the information about each video and It'll append that to the main div, content.

In simple words:

  1. I created an array named links which contains objects, with information about each video:
var links = [{
      thumbnail: "thumbnail.jpg",
      url: "url",
      alt: "alt"
    }, {
      thumbnail: "thumbnail2",
      url: "url2",
      alt: "alt2"
    }]

  1. I created a parent div, which'll contain all images, <div id="content"></div>.

  2. Using for loop and jquery(.append property), I added elements in parent div with unique Id for each, to access it later:

//access each element of links array one by one
for (var i = 0; i < links.length; i++) {

//"id=${i}" is unique id for each div, it also matches with specific element in array.
//For ex: 2nd element of array will get "id=1"...
  $('#content').append(`<div class="container" id="${i}">
    <img src="${links[i].thumbnail}" alt="${links[i].alt}">
    <a target="_blank" rel="noopener noreferrer">
      <div class="overlay"></div>
  </div>`);
}
  1. Whenever any element with "container" class is clicked, it'll get the id of the element using var id = $(this).attr('id'); and open link using "magnificpopup" for the div of specific Id:
$.magnificPopup.open({
        items: {
          src: `<iframe width="560" height="315" src="${links[id].url}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`,
          type: 'iframe'
        }
      });

Note: Here, links[id].url is url of element with specific Id, which we had assigned to each element while creating it in step 3. Since, we had assigned the Id according to the number of element, like 2nd element as id 1, we directly accessed it here using its position in array.

  1. Final code: 
    var links = [{
  thumbnail: "thumbnail.jpg",
  url: "https://www.youtube.com/embed/video-url-1",
  alt: "Video 1"
}, {
  thumbnail: "thumbnail-2.jpg",
  url: "https://www.youtube.com/embed/video-url-2",
  alt: "Video 2"
}, {
  thumbnail: "thumbnail-3.jpg",
  url: "https://www.youtube.com/embed/video-url-3",
  alt: "Video 3"
}]

for (var i = 0; i < links.length; i++) {
  $('#content').append(`<div class="container" id="${i}">
    <img src="${links[i].thumbnail}" alt="${links[i].alt}">
    <a target="_blank" rel="noopener noreferrer">
      <div class="overlay"></div>
  </div>`);
}

$('.container').on('click', function() {
  var id = $(this).attr('id');

  $.magnificPopup.open({
    items: {
      src: `<iframe width="560" height="315" src="${links[id].url}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`,
      type: 'iframe'
    }
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content"></div>

Upvotes: 1

Related Questions