Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

jQuery Fitvid.js only working on 1st targeted container within carousel

Working on setting up a Bootstrap carousel here: http://test.lt11.com/about/inside/

Each slide for the carousel is made up of content being pulled from the page's custom meta data. This is a wordpress site. Here is my full code for the carousel:

<?php
$slides = get_post_meta($post->ID, "_cmb_inside_slider_content", true ); ?>

<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="false">

<!-- Indicators -->
    <ol class="carousel-indicators">
        <?php
            $i = 1;
            $first = true;

            foreach ( (array) $slides as $key => $slide ) { 
                if ($first) {
                    echo '<li data-target="#carousel" data-slide-to="0" class="active"></li>';
                    $first = false;
                    }
                else {
                    echo '<li data-target="#carousel" data-slide-to="'; ?><?php echo $i++; ?><?php echo '"></li>';
                    }
                } //end foreach
        ?>
    </ol>

<div class="carousel-inner"><!-- Wrapper for slides -->

$first = true;

foreach ( (array) $slides as $key => $slide ) {

    $embed_code = $video_embed = $img = $cinemascope = $caption_heading = $caption_content = '';

    if ( isset( $slide['img'] ) )
    $img = $slide['img'];

    if ( isset( $slide['video_embed'] ) )
    $embed_code = $slide['video_embed']; 

    $video_embed = wp_oembed_get( $embed_code );

    if ( isset( $slide['caption_heading'] ) )
    $caption_heading = esc_html( $slide['caption_heading'] );

    if ( isset( $slide['caption_content'] ) )
    $caption_content = esc_html( $slide['caption_content'] );

    if ( isset( $slide['cinemascope'] ) )
    $cinemascope = $slide['cinemascope']; 

    // Do Something with the data

            if ($first) {
                echo '<div class="item item-wrap active">';
                $first = false;
                } //end if
            else {
                echo '<div class="item item-wrap">';
                } //end else
            echo '<div class="item-inner">';
            if ( $img != '' and $video_embed !='' or $img == '' and $video_embed != '' ) {
                echo '<div class="post_video_wrapper'; ?><?php if ( $cinemascope == 'on' ) { echo ' cinemascope'; } ?><?php echo '">';
                echo '<div id="fitvid" class="post_video_visible">';
                echo $video_embed;
                echo '</div>'; //end .post_video
                echo '</div>'; //end .post_video_wrapper
                } //end if
            if ( $img != '' and $video_embed == '' ) {
                echo '<img class="slider-img" src="'; ?><?php echo $img; ?><?php echo '">';
                }
                echo '<div class="carousel-caption">';
                echo '<div class="caption-heading">';
                echo $caption_heading;
                echo '</div>'; //end .caption-heading
                echo '<div class="caption-content">';
                echo $caption_content;
                echo '</div>'; //end .caption-content
                echo '</div>'; //end .carousel-caption

            echo '</div>'; //end .item-inner
            echo '</div>'; //end .item item-wrap active

        } //end foreach 

    ?>
    </div><!--.carousel-inner-->

    <!-- Controls -->
    <a class="carousel-control left" href="#carousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="carousel-control right" href="#carousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
    </div><!--#carousel-->

I'm using the jQuery plugin Ftivid.js to take the oEmbed's, make them responsive and automatically fit the parent container. Plugin can be found here: http://fitvidsjs.com/

Here is my jQuery code contained in my header.php file for the wordpress site:

$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$("#fitvid").fitVids();  });

The fitvid.js plugin seems to be working just fine for the first video in the carousel. But the 2nd item and subsequent items fitvid.js fails to wrap the oEmbed in a fluid container element. Like this:

<div class="fluid-width-video-wrapper" style="padding-top: 56.266666666666666%;">

I would like for fitvid.js to work on each video in the carousel to fit the container and be responsive. I am clueless on how to fix this problem. Thanks for the help guys! :)

User Gravatar

bigchokeslam

Posted Jun 10 2014 13:07 UTC

$25



4 Replies


Hi bigchokeslam,

Here is the fix for the video:

.post_video_wrapper iframe { width: 100%; height: 100%; }

Just add this line of css somewhere in the CSS or in the html in <style> tag.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Jun 10 2014 13:13 UTC

Thanks for your response, Nikola. If you revisit the site now you will see that this does work pretty well. It seems, however, that it's not perfect for all videos and the fitvid.js plugin works much better (look at the 3rd slide with a youtube video, it plays with a strange black margin on the left, right and bottom parts of the video). Do you know of any way to get the fitvid.js working for each slide with video?

User Gravatar

bigchokeslam

Posted Jun 10 2014 14:34 UTC

Have you tried targeting by the class instead of the id as id's are supposed to be unique and not applied to more than one div.

Change

echo '<div id="fitvid" class="post_video_visible">';

to

echo '<div class="fitvid post_video_visible">';

And use:

$(function() {
    $(".fitvid").fitVids();
});

Or even target the parent carousel itself so as to affect all children rather than targeting each element individually.

$(function() {
    $("#carousel").fitVids();
});
User Gravatar

nightbook2333

Posted Jun 10 2014 15:19 UTC

Solution

This didn't solve your task? Get your own custom solution.

Try this.

$(document).ready(function(){
    // Target carousel container
    $("#carousel").fitVids();
});
User Gravatar

renekorss

Posted Jun 10 2014 21:55 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions