Iframes inside bootstrap tab disappear when tab is shown

Question

I am currently struggling with strange iframe behaviour: I have bootstrap tab with three youtube iframes in it. When I go to this tab for the first time, iframes dissappear, but if I click on another tab and go back to tab with iframes, they are shown! I've tried forcing iframe reloading with 'shown.bs.tab' event in js, iframes appeared, reloaded but then disappeard. Here is the code inside tab with videos

        <div id="videoblog" class="tab-pane fade">
                    <?php 
            $news_query = new WP_Query(array('post_type'=>'video', 'posts_per_page'=>3)); 
            while ($news_query->have_posts()){
                $news_query->the_post();
                $video_link = get_post_meta( get_the_id(), 'youtube_link', true );
                $video_link = str_replace("watch?v=", "embed/", $video_link);
                 ?>
                    <div class="news-item <?php if($post_num == 0 || $post_num == 2) { echo 'left'; } else { echo 'right'; } ?>">
                        <div class="videowrapper">
                            <iframe src="<?php echo $video_link.'?rel=0&fs=1'; ?>" width="650" height="420" allowfullscreen frameborder="0"></iframe>
                        </div>
                        <div class="news-item-text pt-sans">
                        <div class="news-text-wrapper">
                            <span class='news-item-date'>
                                <?php echo get_the_date('d.m.Y'); ?>

                            </span>
                            <span class="news-item-title">
                                <?php echo get_the_title(); ?>
                            </span>
                            <span class='news-item-excerpt'>
                                <?php echo get_the_excerpt(); ?>
                            </span>
                            </div>
                        </div>
                    </div>
            <?php } ?>
    </div>

Also I've noticed that if I insert video with 'v/' instead of 'embed/', the videos are shown but fullscreen button doesn't work

Answer 1

Your problem is not within your control. iframes are not your site (at least when embedding content from outside sources). The content there is under the control of some other developer. Then you have the problem that hiding and showing things using JavaScript can really mess things up – a common example is with Google Maps. The best you can do is to switch to plain links and enable oEmbed for that content as this is a slight and tiny bit more under your control and easier to handle than no control with iFrames. Then, you should perform something similar to an AJAX request (JS wise) and reload the contents when showing the tab/div/whatever-html-element. More info about that can be found in this answer.