Support

Account

Home Forums ACF PRO Best Option for iFrame Embed

Solving

Best Option for iFrame Embed

  • I have an iFrame video that is from a service not supported by oEmbed. What’s the best option for embedding this iFrame?

    I’m considering a textarea. But I don’t have an option in my ACF 5 to make a text area HTML. I have add p tags, add <br> and no formatting.

    Thanks in advance!

  • The best option for is a text field with no formatting. No formatting means whatever you put in there is what’s output by the field so this works good with any kind of code that a service tells you to add to a page.

  • What about escaping the output for security? I assume since you need the “raw” code on output you cannot use the esc_html or esc_js functions, but does that pose a possible security risk?

  • I know this is a few months old but I came across this while searching for how to escape an iframe and wanted to share my solution. I ended up using the url field and then outputting the iframe in my custom template. I also added two additional text fields for width and height so my final code looked like this:

    <?php echo ( '<iframe style="width:'. esc_attr( get_field( 'iframe_width' ) ) ."; height:" . esc_attr( get_field( 'iframe_height' ) ) . ';" src="' . esc_url( get_field( 'iframe_url' ) ) .'" frameborder="0" allowfullscreen></iframe>' ); ?>

    Hope that helps!

  • And I missed the question.

    @bandonrandon‘s solution works if you need to have more security and that’s the way I would go.

    For example, one of our client needed a way to embed Wistia videos, which are not supported by wistia. In this case I provided them with a field to enter the video ID and then coded what was needed into a function/shortcode type of thing.

    I usually do not supply fields like this to people that could put things in there that they shouldn’t and textarea fields usually work for my purposes.

  • I am stuck in a similar scenario. I need to embed vimeo livestream sessions (which are iframes) into CPT’s built with ACF Fields. The Vimeo code is:

    <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://vimeo.com/event/XXXXXX/embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div>

    And I’d like to have the ACF as only the src URL which is https://vimeo.com/event/XXXXXX/embed

    @hube2 Do you have resources/links on how to build the function/shortcode you mentioned?

  • @blakemiller in this case I would probably use a format value filter on a URL field

    
    add_filter('acf/format_value/name=vimeo_url', 'vimeo_url_to_iframe', 20, 3);
    function vimeo_url_to_iframe($value, $post_id, $field) {
      if (!$value) {
        return $value;
      }
      return '<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="'.$value.'" frameborder="0" allow="autoplay; fullscreen" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div>';
    }
    
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.