oEmbed: Change iframe src to "data-src"

• Turboflip

• May 21, 2017 at 11:30 pm

Hello,

I have a question regarding the output of the oembed-field: Is it possible to change the ‘src’-attribute of an iframe to a ‘data-src’-attribute? I want to lazyload youtube videos with the great lazysizes-Plugin.

I have already added the class=”lazyload” to the outputted iframe. But I don’t know how to replace the ‘src’-attribute to a ‘data-src’-attribute.

This is what I used as a reference:

<?php

// get iframe HTML
$iframe = get_field('oembed');

// use preg_match to find iframe src
preg_match('/src="(.+?)"/', $iframe, $matches);
$src = $matches[1];

// add extra params to iframe src
$params = array(
    'controls'    => 0,
    'hd'        => 1,
    'autohide'    => 1
);

$new_src = add_query_arg($params, $src);

$iframe = str_replace($src, $new_src, $iframe);

// add extra attributes to iframe html
$attributes = 'frameborder="0" class="lazyload"';

$iframe = str_replace('></iframe>', ' ' . $attributes . '></iframe>', $iframe);

// echo $iframe
echo $iframe;

?>

Any kind of help would be greatly appreciated.

Thanks!

• Matthias Honert

• November 30, 2018 at 10:35 pm

I don’t know if you’ve found a solution. I will write my solution here, because your Topic is well ranked by Google and here no answer is written.
An here comes my solution.

paste preg_replace:

preg_replace('~<iframe[^>]*\K(?=src)~i','data-',$iframe);

Full Snippet:

<?php

// get iframe HTML
$iframe = get_field('oembed');
// use preg_match to find iframe src
preg_match('/src="(.+?)"/', $iframe, $matches);
$src = $matches[1];

// add extra params to iframe src
$params = array(
    'controls'    => 0,
    'hd'        => 1,
    'autohide'    => 1
);

$new_src = add_query_arg($params, $src);

$iframe = str_replace($src, $new_src, $iframe);

// add extra attributes to iframe html
$attributes = 'frameborder="0" class="lazyload"';
// use preg_replace to change iframe src to data-src
$iframe = preg_replace('~<iframe[^>]*\K(?=src)~i','data-',$iframe);
$iframe = str_replace('></iframe>', ' ' . $attributes . '></iframe>', $iframe);

// echo $iframe
echo $iframe;

?>

• ukguy

• April 27, 2019 at 12:36 am

@matthias-honert thank you!

$iframe = preg_replace(‘~<iframe[^>]*\K(?=src)~i’,’data-‘,$iframe);

sorted it for me too after hours of looking!!! 🙂