jQuery - iframe src from input - multiple instances

Question

I have the iframe receiving it's src from the input for each instance of the .item but I think my code is iterating over every instance of .item whenever a keyup happens.

How do I modify the code to only execute on the .item for which the input of that item is being changed? I want to have it where the iframe appears after the url has been copy / pasted. It doesn't have to be on keyup but whenever the url is successfully entered -> show the iframe.

Bonus requirement :: I only want to show the iframe if it has a value entered in it's associated input, either on load or when the link has been entered.

Codepen: https://codepen.io/moofawsaw/pen/wvGNvrx

$(document).ready(function() {
  iframeKeyup();

  function getId(url) {
    var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
    var match = url.match(regExp);

    if (match && match[2].length == 11) {
      return match[2];
    } else {
      return "error";
    }
  }
  $("input").on("keyup change", function() {
    iframeKeyup();
  });

  var myId;

  function iframeKeyup() {
    $(".item").each(function() {
      var $this = $(this);
      var myUrl = $this.find("input").val();
      myId = getId(myUrl);
      $this
        .find(".iframe")
        .html(
          '<iframe width="100%" height="100" src="//www.youtube.com/embed/' +
          myId +
          '" frameborder="0" allowfullscreen></iframe>'
        );
    });
  }
});

.item {
  height: 100px;
  width: 100px;
  margin: 1.3rem
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <input type="text" value="https://www.youtube.com/watch?v=I7QJkecUpi8" />
  <div class="iframe"></div>
</div>

<div class="item">
  <input type="text" value="" />
  <div class="iframe"></div>
</div>

Doing this while user types makes no sense. Will be making numerous bad requests to youtube while they type. Only set iframe when they are done — charlietfl
– charlietfl, Commented Sep 24, 2020 at 2:15

Always Helping · Accepted Answer · 2020-09-24 02:38:32Z

1

You can pass the parent element to your iframeKeyup and then find the iframe to be load only when to to the actually typed input on paste or input.

Also, to check if input is empty to just check if its has val() or else make the iframe empty again.

Edit: Since you want to load the iframe if input has a default value then you need to set a flag and pass true to false when you call your iframeKeyup which will check whether its a typed input iframe load or is it just onload iframe -

Live Demo:

$(document).ready(function() {
  iframeKeyup(false)

  function getId(url) {
    var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
    var match = url.match(regExp);

    if (match && match[2].length == 11) {
      return match[2];
    } else {
      return "error";
    }
  }
  $("input").on("input paste", function() {
    var parent = $(this).parent()
    iframeKeyup(true, parent); //pass the parent on input or paste
  });

  var myId;

  function iframeKeyup(isTyped, parent = null) {
    if (isTyped) {
      loadiFrame(parent)
    } else {
      $(".item").each(function(index, element) {
        var $item = $(element);
        loadiFrame($item)
      })
    }
  }

  function loadiFrame(parent) {
    var myUrl = parent.find("input").val();
    if (myUrl != '') {
      myId = getId(myUrl);
      parent
        .find(".iframe")
        .html(
          '<iframe width="100%" height="100" src="//www.youtube.com/embed/' +
          myId +
          '" frameborder="0" allowfullscreen></iframe>'
        );
    } else {
      parent
        .find(".iframe")
        .html('')
    }
  }
});

.item {
  height: 100px;
  width: 100px;
  margin: 1.3rem
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <input type="text" value="https://www.youtube.com/watch?v=I7QJkecUpi8" />
  <div class="iframe"></div>
</div>

<div class="item">
  <input type="text" value="" />
  <div class="iframe"></div>
</div>

<div class="item">
  <input type="text" value="https://www.youtube.com/watch?v=I7QJkecUpi8" />
  <div class="iframe"></div>
</div>

edited Sep 24, 2020 at 2:38

answered Sep 24, 2020 at 2:27

Always Helping

14.6k4 gold badges16 silver badges30 bronze badges

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

2 Comments

Kyle Underhill Over a year ago

Would you be able to run this on load for the value's that are already filled in the input?

Always Helping Over a year ago

@KyleUnderhill Answer updated and working for input with default values as well as showing the relevant iframe to the typed input value or when a url is pasted.

Collectives™ on Stack Overflow

jQuery - iframe src from input - multiple instances

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related