How to store iframes

I’m not sure I’m following, but I think I’ve got it. This is my understanding: You have multiple tabs on one page, each tab contains a video from any particular one of several possible streaming sites. You don’t want to load all videos at once because it can take a long time and often unnecessarily uses resources. You prefer to dynamically load videos when the respective tab is clicked, while stopping the current video to prevent dueling sound tracks and excessive data flow.

Yes, use JavaScript of jQuery to manage this. The data you need for each video can all be stored in a JS array and retrieved and utilized depending on which tab event fires. This may include information on what to do to stop a particular video. The method to start and stop videos depends on the video source and varies. Streaming sites all have APIs through which you can manage their content. Working this out for sites you want to support is mainly a big research project.

Regarding several topics all relating to your theme, that’s fine. We prefer specific, targeted topics over one topic with multiple, remotely related questions. It’s better for others searching for similar solutions. It doesn’t matter if it’s all for your one theme. Themes are complicated beasts!

My bad, I forgot to answer you. I finally fixed it with some Javascript as you suggested.
Here is the nav and tabs if somebody ever wants to do something like video hosting:

<!-- Menu-tabs) -->
<?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 ?>

Here is the code to pause/reset the current iframe when a different option is clicked:

// Solution to stop current video when a different option is clicked
$('a.nav-link').click(function(e) {    
    $('div#myTabContent div.tab-pane.active iframe').attr('src',function() { return $(this).attr('src'); });
});

$('a.nav-link:first').trigger('click');

This works by using custom fields, so here I leave my code(again if somebody wants to do something like this):

// Iframe
function iframe($postID){
	$iframe = 'Iframe';
	$iframe_player = get_post_meta($postID, $iframe, true);
	if($iframe_player==''){
		delete_post_meta($postID,$iframe);
		add_post_meta($postID,$iframe, '#');
		return "#";
		}
	return $iframe_player;
	}

I hope not to violate any WordPress forum rule as this was not exactly an answer or a comment. This was more like a solution.