0

i'm trying to resolve how to load the content of my tab only when its clicked, not before. And i need to reload the content every time I change to another tab, that's because i need to embed autoplayed videos inside every tab and i need to reload so the video doesn't keep playing on the back. And i need that only one video plays everytime. I've tryed a lot of things and at this moment i doesn't hace anything that i think it will works.

Right now the code for my tabs is the following one:

const tabSystem = {
  init() {
    document.querySelectorAll('.tabs-menu').forEach(tabMenu => {
      Array.from(tabMenu.children).forEach((child, ind) => {
        child.addEventListener('click', () => {
          tabSystem.toggle(child.dataset.target);
        });
        if (child.className.includes('is-active')) {
          tabSystem.toggle(child.dataset.target);

        }
      });
    });
  },
  toggle(targetId) {
    document.querySelectorAll('.tab-content').forEach(contentElement => {
      contentElement.style.display = contentElement.id === targetId ? 'block' : 'none';
      document.querySelector(`[data-target="${contentElement.id}"]`).classList[contentElement.id === targetId ? 'add' : 'remove']('is-active');
    })
  },
};
tabSystem.init();
margin: 0;
font-size: 0;
padding: 0;

}
.tabs-menu {
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}
.tab-item {
  font-size: 15px;
  background-color: #A6B7C7;
  display: inline-block;
  padding: 13px 20px;
  color: white;
  margin: 0;
}
.is-active {
  color: black;
}
.tab-content {
  display: none;
  padding: 0px;
}
.show-content {
  display: block;
  background: lightgray;
}
<ul class="tabs-menu">
  <li class="tab-item is-active" data-target="first-tab"><a>Español</a></li>
  <li class="tab-item" data-target="second-tab" id="Tab02"><a>English</a></li>
  <li class="tab-item" data-target="third-tab"><a>Português</a></li>
</ul>

<div class="tab-content" id="first-tab">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/7N9XW_mQ7hI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

<div class="tab-content" id="second-tab">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/bdvidv6RXJY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

<div class="tab-content" id="third-tab">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/rSnaEd-dwTg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

If anyone have any idea how could solve this i would appreciate it.

showdev
  • 28,454
  • 37
  • 55
  • 73
Andrés García
  • 23
  • 5
  • You could [remove](https://stackoverflow.com/questions/8830839/javascript-dom-remove-element) the iframe elements and [add](https://stackoverflow.com/questions/3425142/adding-html-elements-with-javascript) them again. Alternatively, consider stopping and starting the videos using the [YouTube Player API](https://developers.google.com/youtube/iframe_api_reference). Also see [YouTube iframe API: how do I control an iframe player that's already in the HTML?](https://stackoverflow.com/questions/7443578/) – showdev Jul 26 '21 at 04:39

1 Answers1

1

Remove src of each iFrame in DOM and set them on tab click by javascript. Below are ways to add and remove source. Give Id to each iFrame or find iFrame based on clicked tab and add source and remove source of all other iframe. or just globally remove all source of iFrames and add source to the required frame.

//ADD SOURCE
document.getElementById('first').src = 'https://www.youtube.com/embed/7N9XW_mQ7hI';
//REMOVE SOURCE
document.getElementById('first').src = '';
Jitender Dhaliwal
  • 56
  • 9