Как предотвратить работу одного iframe под другим?

Question

Я использую видеосистему iframe с вкладками для их разделения, проблема в том, что все iframe загружались при входе в этот раздел. Я нашел этот ответ среди многих других, которые не смогли решить проблему одновременной загрузки Чтобы загрузить видео с помощью функции «onclick» для оптимизации веб-страницы , но теперь у меня возникла проблема с использованием решения с помощью jquery. выбрать опцию 1 (iframe) загружается нормально, но если я нажимаю опцию 2, обе продолжают загрузку, т. е. опция 1 продолжает загрузку под другой, которая была нажата.

Система, в которой я ее применяю, - это Datalife Engine нафайл .tpl и jquery 1.8.2, чтобы я мог изменить его на более текущий, но результат тот же

<script>
$(document).ready(function() {
  $("#myButton").on("click", function() {
    var $iframe = $("#myIframe");
    $iframe.attr("src", "https://www.youtube.com/embed/6wUxpFu9Wvo");
    $iframe.show();
  });
});
$(document).ready(function() {
  $("#myButton1").on("click", function() {
    var $iframe = $("#myIframe");
    $iframe.attr("src", "https://www.youtube.com/embed/6wUxpFu9Wvo");
    $iframe.show();
  });
});
</script>
<script language="javascript" type="text/javascript">
$(function(){
    $('.close').click(function(){      
        $('iframe').attr('src', $('iframe').attr('src'));
    });
});
</script>
<iframe id="myIframe" width="560" height="315" style="display:none;" src="" frameborder="0" allowfullscreen></iframe>
<button id="myButton" class="close">Load video</button>

<iframe id="myIframe1" width="560" height="315" style="display:none;" src="" frameborder="0" allowfullscreen></iframe>
<button id="myButton1" class="close">Load video</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Окончательный результат заключается в том, что вариант 1 по-прежнему загружается ниже другого варианта, я пробовал варианты перезагрузки iframes, но те, кто загружает видео с автоигрой, продолжают загружаться ниже нового выбранногоодин

Answer 1

Вы можете использовать тот же самый iFrame и изменить его src нажатием нескольких кнопок. Ниже приведен пример, похожий на ваш, с одним iFrame и 3 кнопками. Каждая кнопка загружает другое видео в один и тот же кадр. Я использую идентификатор видео YouTube, чтобы дифференцировать видео.

$(function() {
  $(".myButton").on("click", function() {
    var videoId = $(this).data('video-id');
    var $iframe = $("#myIframe");

    $iframe.attr("src", "https://www.youtube.com/embed/" + videoId);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="myIframe" width="560" height="315" src="" frameborder="0" allowfullscreen style="border: 1px solid black;"></iframe>
<br />
<button id="button1" class="myButton" data-video-id="6wUxpFu9Wvo">Load video 1</button>
<button id="button2" class="myButton" data-video-id="z5jnpb_lp4w">Load video 2</button>
<button id="button3" class="myButton" data-video-id="6wUxpFu9Wv2">Load video 3</button>