How to refresh tab content on click event. Wordpress and Javascript

Question

This is probably my second or third question regarding the Worpress theme in which I'm working on. This is the website that I need help with post sample with +2 iframes

What I want is to stop the current video iframe from buffering when a different option is clicked (li element). The current status of it, is the inverse of what I want. All I mean is that all iframes can be reproduced in the same time, and I want to avoid that.

This is my php code: You can see that I have a li element witht the class of "nav-item" and the content to be displayed( <?php echo $iframe; ?> ) is inside the div with the class "video-grid"

<!-- Menu-tabs) -->
<?php $iframe_name = get_post_meta($post->ID, 'Vimeo URL', true); ?>
<?php if (!empty($iframe)) : ?>
<?php else : ?>
<ul class="nav nav-pills nav-justified" id="myTab" role="tablist">
<?php $links = get_post_custom_values( 'Iframe' ); ?>
<?php if (is_array($links)) : ?>
<?php foreach ($links as $key=>$li) :  ?>
<li class="nav-item <?php echo $key == 0 ? 'active ' : ''; ?>">
<a class="nav-link " data-toggle="tab" href="#tab<?php echo $key; ?>" role="tab" aria-controls="tab" aria-expanded="true">Option</a>
</li>
<?php endforeach ; ?>
<?php endif; ?>
</ul>
<div class="tab-content" id="myTabContent">
<!--------------------------------------------------------- Content-tabs / Iframes players --------------------------------------------------------------------------------->
<?php $player = get_post_custom_values( 'Iframe' ); ?>
<?php if (is_array($player)) : ?>
<?php foreach ($player as $key=>$iframe) : ?>
<div class="tab-pane <?php echo $key == 0 ? 'active ' : ''; ?>" id="tab<?php echo $key; ?>" role="tabpanel" aria-labelledby="tab">
<br>
<div class="song">
<div class="video-grid">
<?php echo $iframe; ?>
</div>
</div>
</div>             
<?php endforeach ?>

I tried doing this by using some Javascript code but its not working yet. Here is what I have so far:

$(document).ready(
    function() {
        $('.video-grid').click('.nav-item');
            reload('.video-grid');
        });

Can you guys help me with this?

Answer 1

You could reload the src of the iframe elements to stop them...

$(document).ready(function() {

    $('a.nav-link').click(function() {
        $('div#myTabContent iframe').each(function() { 
            $(this).attr('src',$(this).attr('src'));  
        });
    });

});

EDITED :

Checking your code deeper with inspector, another solution (faster, cleaner and probably better) would be to search for the previous active panel and just stop the iframe of that panel (doesn't really make sense to reload the rest because they are not running)...

$(document).ready(function() {

    $('a.nav-link').click(function() {
        $('div#myTabContent div.tab-pane.active iframe').attr('src',function() { return $(this).attr('src'); });
    });

});

Here you have a fiddle example of your case... https://fiddle.jshell.net/rigobauer/em5vw5e7/