Synopsis

This plugin allows the user to embed content from allowed sites using a [media] BBCode, site-specific BBCodes such as [youtube], or from simply posting a supported URL in plain text.

It is designed to be able to parse any of the following forms:

  • [media]http://www.youtube.com/watch?v=-cEzsCAzTak[/media]
    (simplest form)
  • [media=youtube]-cEzsCAzTak[/media]
    (from XenForo's BB Code Media Sites)
  • [youtube]http://youtu.be/watch?v=-cEzsCAzTak[/youtube]
    (from various forum softwares such as phpBB)
  • [youtube=http://www.youtube.com/watch?v=-cEzsCAzTak]
    (from WordPress's YouTube short code)
  • [youtube]-cEzsCAzTak[/youtube]
    (from various forum softwares such as vBulletin)
  • http://www.youtube.com/watch?v=-cEzsCAzTak
    (plain URLs are turned into embedded content)

Has built-in support for Dailymotion, Facebook, Instagram, Twitch, Twitter, YouTube and more.

Example

$configurator = new s9e\TextFormatter\Configurator;

// We want to create individual BBCodes such as [youtube] in
// addition to the default [media] BBCode
$configurator->MediaEmbed->createIndividualBBCodes = true;

// Add the sites we want to support
$configurator->MediaEmbed->add('dailymotion');
$configurator->MediaEmbed->add('facebook');
$configurator->MediaEmbed->add('youtube');

// Get an instance of the parser and the renderer
extract($configurator->finalize());

$examples = [
    '[media]http://www.dailymotion.com/video/x222z1[/media]',
    'https://www.facebook.com/video/video.php?v=10100658170103643',
    '[youtube]-cEzsCAzTak[/youtube]'
];

foreach ($examples as $text)
{
    $xml  = $parser->parse($text);
    $html = $renderer->render($xml);

    echo $html, "\n";
}
<span data-s9e-mediaembed="dailymotion" style="display:inline-block;width:100%;max-width:640px"><span style="display:block;overflow:hidden;position:relative;padding-bottom:56.25%"><iframe allowfullscreen="" scrolling="no" src="//www.dailymotion.com/embed/video/x222z1" style="border:0;height:100%;left:0;position:absolute;width:100%"></iframe></span></span>
<iframe data-s9e-mediaembed="facebook" allowfullscreen="" onload="var a=Math.random();window.addEventListener('message',function(b){if(b.data.id==a)style.height=b.data.height+'px'});contentWindow.postMessage('s9e:'+a,'https://s9e.github.io')" scrolling="no" src="https://s9e.github.io/iframe/facebook.min.html#video10100658170103643" style="border:0;height:360px;max-width:640px;width:100%"></iframe>
<span data-s9e-mediaembed="youtube" style="display:inline-block;width:100%;max-width:640px"><span style="display:block;overflow:hidden;position:relative;padding-bottom:56.25%"><iframe allowfullscreen="" scrolling="no" style="background:url(https://i.ytimg.com/vi/-cEzsCAzTak/hqdefault.jpg) 50% 50% / cover;border:0;height:100%;left:0;position:absolute;width:100%" src="https://www.youtube.com/embed/-cEzsCAzTak"></iframe></span></span>

Configure a site manually

In addition to the sites that are directly available by name, you can define new, custom sites.

$configurator = new s9e\TextFormatter\Configurator;

$configurator->MediaEmbed->add(
    'youtube',
    [
        'host'    => 'youtube.com',
        'extract' => "!youtube\\.com/watch\\?v=(?'id'[-\\w]+)!",
        'iframe'  => [
            'width'  => 560,
            'height' => 315,
            'src'    => 'http://www.youtube.com/embed/{@id}'
        ]
    ]
);

// Get an instance of the parser and the renderer
extract($configurator->finalize());

$text = 'http://www.youtube.com/watch?v=-cEzsCAzTak';
$xml  = $parser->parse($text);
$html = $renderer->render($xml);

echo $html;
<span data-s9e-mediaembed="youtube" style="display:inline-block;width:100%;max-width:560px"><span style="display:block;overflow:hidden;position:relative;padding-bottom:56.25%"><iframe allowfullscreen="" scrolling="no" src="http://www.youtube.com/embed/-cEzsCAzTak" style="border:0;height:100%;left:0;position:absolute;width:100%"></iframe></span></span>