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">
            $news_query = new WP_Query(array('post_type'=>'video', 'posts_per_page'=>3)); 
            while ($news_query->have_posts()){
                $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 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 class="news-item-title">
                                <?php echo get_the_title(); ?>
                            <span class='news-item-excerpt'>
                                <?php echo get_the_excerpt(); ?>
            <?php } ?>

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

  • You should place some code with which you are facing such issues which will help us to solve your issues. Commented Mar 27, 2016 at 4:24

1 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.