Vimeo Fullscreen Embed Code Not Working

[eddeaux]

Hello Guys, I have this problem where I need to embed a vimeo video, but I can’t get the fullscreen option to show up even though I already added this chunk of code to my functions.php. Any ideas on what I’m doing wrong?

/* Vimeo Fullscreen Code
================================================== */
function sf_video_vimeo( $url, $width = 640, $height = 480 ) {
$url = str_replace( ‘https://’, ‘http://’, $url );
$video_id = sf_get_vimeoid( $url );
$vimeo_params = apply_filters( ‘sf_vimeo_embed_params’, ‘?title=0&byline=0&portrait=0’ );

$video_padding = ( intval( $height, 10 ) / intval( $width, 10 ) ) * 100;
$inline_style = ‘padding-bottom: ‘ . $video_padding . ‘%;’;

if ( $video_id == “” ) {
return ‘<div class=”sf-video-wrap”>’ . __( “Video not found”, “swiftframework” ) . ‘</div>’;
}

if ( is_ssl() ) {
return ‘<div class=”sf-video-wrap” style=”‘ . $inline_style . ‘”><iframe itemprop=”video” class=”video-embed” src=”https://player.vimeo.com/video/&#8217; . $video_id . $vimeo_params . ‘” width=”‘ . $width . ‘” height=”‘ . $height . ‘” webkitallowfullscreen mozallowfullscreen allowfullscreen ></iframe></div>’;
} else {
return ‘<div class=”sf-video-wrap” style=”‘ . $inline_style . ‘”><iframe itemprop=”video” class=”video-embed” src=”http://player.vimeo.com/video/&#8217; . $video_id . $vimeo_params . ‘” width=”‘ . $width . ‘” height=”‘ . $height . ‘” webkitallowfullscreen mozallowfullscreen allowfullscreen ></iframe></div>’;
}
}

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

Never add code to the theme functions.php like that, always add it via a child theme using FTP & a code editor – you can crash the whole live site.

Please add your FTP details and a WP login so we can help you further.

You are referring to this video?

[eddeaux]

This reply has been marked as private.

[eddeaux]

And yes, the video image you showed was indeed the video that we want to have the fullscreen option on. Thanks!

[David Martin – Support]

This reply has been marked as private.

[eddeaux]

I had to log in to liquid web support to figure this out.

host.leonardslatkin.com/ – if you add the / to it or if you can see a / then click on that, then the path is home/leonard/public_html

I use Fetch for FTP so I didn’t see the / option under “path” on the toolbar until I added it to the login.

Thanks for your help. Sorry for the confusion and delay. Liquid Web is great hosting, but complicated.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

Until we make a change within the SF plugin to add an extra filter for webkitallowfullscreen mozallowfullscreen allowfullscreen, you will need to do this:

Open the file /wp-content/plugins/swift-framework/includes/page-builder/inc/helpers.php and locate the function spb_video_vimeo(). Replace the entire function with the below.

    if ( ! function_exists( 'spb_video_vimeo' ) ) {
        function spb_video_vimeo( $url, $width = 640, $height = 480, $extra_params = '' ) {
            
            // Get video id
            $url          = str_replace( 'https://', 'http://', $url );
            $video_id     = spb_get_vimeoid( $url );

            // Variables
            $params = '?title=0&byline=0&portrait=0' . $extra_params;
            $vimeo_params = apply_filters( 'spb_vimeo_embed_params', $params );
            $video_padding = ( intval( $height, 10 ) / intval( $width, 10 ) ) * 100;
            $inline_style  = 'padding-bottom: ' . $video_padding . '%;';
            $ssl_override = apply_filters( 'spb_video_youtube_ssl', false );

            if ( $video_id == "" ) {
                return '<div class="video-wrap">' . __( 'Video not found', 'swiftideas' ) . '</div>';
            }

            // Return
            $return = '';
            if ( is_ssl() || $ssl_override ) {
                $return = '<div class="video-wrap" style="' . $inline_style . '"><iframe itemprop="video" class="video-embed" src="https://player.vimeo.com/video/' . $video_id . $vimeo_params . '" width="' . $width . '" height="' . $height . '" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>';
            } else {
                $return = '<div class="video-wrap" style="' . $inline_style . '"><iframe itemprop="video" class="video-embed" src="http://player.vimeo.com/video/' . $video_id . $vimeo_params . '" width="' . $width . '" height="' . $height . '" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>';
            }
            $return = apply_filters( 'spb_video_vimeo_embed_return', $return, $video_id, $width, $height );
            return $return;
        }
    }

[eddeaux]

That fixed it! Thank You!

[David Martin – Support]

Glad to help you out!

Thanks,
David

[eddeaux]

Hi David, this issue has been fixed manually, but we had hoped that it was going to be added to the latest update of the theme. We just updated to the latest framework and theme and we have to re-upload helpers.php each time. It’s not a huge deal, but it would be super cool if there was a toggle to make this happen on the videos for vimeo. Thanks for the great support!

[David Martin – Support]

I understand, will assign over to Ed (lead dev) for his consideration for inclusion.

Thanks.

[Swift Ideas – Ed]

Will change that in the next update, thanks!

– Ed

[Taffy]

We still have this issue.

No Fullscreen icon appearing.

Tried the above fix and the entire page went blank.

Any help would be greatly appreciated,