Javascript setting iframe src not working

Question

When I set the iframe source using javascript it doesn't work. The first alert message shows up as the data-src of the iframe, but the second shows up empty.

for (var i = 0; i < images.length; i++) {
  var slide = images.item(i);

  slide.style.src = slide.dataset.src;
  alert(slide.dataset.src);

  alert(slide.style.src);
}

<iframe class="load color light" data-type="src" width="865" height="572" data-src="https://www.youtube.com/embed/ONA67lhVpLs?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

style changes the stylesheet of the element. Use slide.src instead — imvain2
– imvain2, Commented Aug 7, 2020 at 19:16

Mason Wang · Accepted Answer · 2020-08-07 19:24:41Z

2

Use slide.src instead of slide.style.src.

You want to set the HTML attribute element.src, element.style.src sets a CSS property src, which isn't setting the iframe src. Read more about the CSS property src here.

answered Aug 7, 2020 at 19:24

Mason Wang

362 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pranav Rustagi · Accepted Answer · 2020-08-07 19:22:36Z

2

The style property is for changing CSS properties. src is an HTML attribute.

Try using this :

for (var i = 0; i < images.length; i++) {
  let slide = images.item(i);
  slide.setAttribute("src", slide.dataset.src);
  alert(slide.dataset.src);

  alert(slide.getAttribute("src"));
}

answered Aug 7, 2020 at 19:22

Pranav Rustagi

2,7261 gold badge8 silver badges21 bronze badges

Collectives™ on Stack Overflow

Javascript setting iframe src not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related