Support » Developing with WordPress » How to store iframes

  • Resolved kirasiris

    (@kirasiris)


    Hello guys so this is probably my second or third question regarding the same theme in which I’m working.
    I already did a function to add as many iframe as I want, and I made possible to show the right content in the right tab(something that was not working that well)
    Now what I want is when an user clicks in a different option , the video of the previous tab should stop automatically.

    Current status:
    All the iframes can be reproduced inn the same time, and I dont want that.

    I actually had an idea about storing the iframes in an array and then when another “option” is selected, the array would show the new iframe in the div containing the video player, as you can imagine, I did not do it, because storing iframes would be like specific Iframes, right? I dont want to just use some iframes from big companies, I want to be able to display any video iframe that I want.

    I dont know if m explanation was clear. Is it possible to do it with Javascript, if yes, can you help me with this?

    This is my code:

    
    <!-- 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 ?>
    

    As you can see if I try to do the first idea(the storing iframes) the iframe is inside the “video-grid” div. What would be the right way to it?.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    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!

    Thread Starter kirasiris

    (@kirasiris)

    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.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to store iframes’ is closed to new replies.