Iframes inside bootstrap tab disappear when tab is shown

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=0fs=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

Topic twitter-bootstrap tabs youtube Wordpress

Category Web


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.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.