Support

Account

Home Forums ACF PRO oEmbed/iFrame load options

Solving

oEmbed/iFrame load options

  • Hello all!

    All of my more recent projects seem to be involving more and more videos, and it’s brought up a whole slew of new problems that I’m not really sure how to approach. The biggest issue is the load time of the pages.

    Case in point:
    Current client wants a TEAM page which 20+ team members on it, about half of which will get a Vimeo video embedded in a modal window. Problem with this is that 13ish iframes on a single pages is dragging my page load speed (on my dev server) from 1.8s(w/o videos) to around 6.9s(w/ videos) which is abysmal.

    More recently I’ve been trying this https://www.labnol.org/internet/light-youtube-embeds/27941/ technique, which works great for when I have video headers or a single video on a site etc; it does not lend itself well to dynamic content, ie when using oEmbed in ACF.

    I know there are some options you can add to an iframe element directly, but there’s no way to use these via oEmbed in ACF… and I’ve tried adding the embed code in manually and then saving the video URL to a variable that get’s called within the loop, but that won’t work for any videos marked PRIVATE so I’m a bit stuck.

    How do you guys handle multiple iframes/videos loading on a page with ACF?

  • @ashikai,

    This isn’t really an ACF issue, having a bunch of Embedded videos will tank any page regardless of how they’re implemented.

    You should really be looking into loading them via AJAX, so when you first load the page there are NO videos loaded at all until someone clicks on an element.

    Heres some pseudo code that should give a general idea of how it would work.

    in template:

    
      <?php
            $args = array
            (
                'post_type' => 'team_members'
            );
            $team_member_query = new WP_Query($args);
            while ($team_member_query->have_posts()): $team_member_query->the_post(); ?>
                <div class="team-member-ajax-trigger" data-id="<?php echo get_the_id(); ?>"></div>
            <?php endwhile; ?>
    

    In JS:

    
    var ajaxurl = 'http://' + window.location.host + '/wp-admin/admin-ajax.php';
    
                $('.team-member-ajax-trigger').click(function ()
                {
                    var id = $(this).data('id');
    
                    $.ajax
                    ({
                        url: ajaxurl,
                        data:
                            {
                                action: 'ajax_make_team_member_video',
                                id: id
                            },
                        method: "POST",
                        error: function (data)
                        {
                            console.error("FAILURE on get Ajax Items", data);
                        }
                    }).done(function (html)
                    {
                        console.log(html);
                        if(html === 'no_id' || html === 'no_video')
                        {
                            //Error out or something
                        }
                        else
                        {
                            //do stuff here to make a video appear.
                            //html should contain your oembedded video
                        }
                    });
                });
    

    In functions.php:

    
    add_action( 'wp_ajax_nopriv_ajax_make_team_member_video',  'ajax_make_team_member_video' );
    add_action( 'wp_ajax_ajax_make_team_member_video','ajax_make_team_member_video' );
    function ajax_make_team_member_video()
    {
        if(!isset($_POST['id']) || !$_POST['id'] || !is_numeric($_POST['id'])):
            echo 'no_id';
            wp_die();
        endif;
    
        $id = $_POST['id'];
        $video = get_field('oembed_video',$id);
    
        if(!$video):
            echo 'no_video';
        else:
            echo '<div class="ajax-loaded-video">'.$video.'</div>';
        endif;
    
        wp_die(); //always end with wp_die when using ajax
    }
    
  • @superpowered – I know really nothing about AJAX. Can you give a brief rundown of what your code is doing? Hopefully knowing what is happening will help me be able to use it as a launching pad.

  • @ashikai

    I don’t know if this will work with vimeo, but it helps on my sites when using youtube.

    https://support.advancedcustomfields.com/forums/topic/youtube-embed-deffer-loading/

    It does give a bit of a boost to page load time, but I’ve never tried it with that number of videos.

    You mentioned values that could be added to the iframe to help. With the proper coding you could also add those settings to the iframe using those hooks.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.