Fix YouTube full screen not working and TinyMCE

In Dolphin 7.3.5 and 7.4.2, users who want to post a YouTube video will have problems not being able to zoom in on the full screen! (Website administrators don't have this problem.)

Because the user posted the YouTube media code for TinyMCE, for example:

<iframe width="560" height="314" allowfullscreen="allowfullscreen" ></iframe>

The Dolphin plug-in module will remove allowfullscreen="allowfullscreen" to become only this:

<iframe width="560" height="314" ></iframe>

It took me months. I finally found the best solution to this problem:

Step 1: Back up all files on the entire site.

Step 2: Download UNA 10.1.0 Beta1 or UNA-v.10.0.0-B2 (We need the new htmlpurifier 4.10.0 to replace the old htmlpurifier 4.7.0)

https://una.io/page/view-discussion?id=3359

Step 3: Copy UNA/plugins/htmlpurifier to YourWebsite/plugins/htmlpurifier

Step 4: Copy LocalMovie.php from Dolphin backup to YourWebsite/plugins/htmlpurifier/standalone/HTMLPurifier/Filter

Step 5: Modify the YoutubeIframe.php file to this...

    public function preFilter($html, $config, $context)
    {
        if (strstr($html, '<iframe') && (strstr($html, 'youtube.com') || strstr($html, 'youtu.be') || strstr($html, 'youtube.com'))) {
            $html = str_ireplace("</iframe>", "", $html);
            if (preg_match_all("/<iframe(.*?)>/si", $html, $result)) {
                foreach ($result[1] as $key => $item) {
                    preg_match('/width="([0-9]+)"/', $item, $width);
                    $width = $width[1];
                    preg_match('/height="([0-9]+)"/', $item, $height);
                    $height = $height[1];
                    if (preg_match('/((\/\/www\.youtube\.com\/embed\/)|(\/\/www\.youtube\.com\/embed\/)|(\/\/www.youtube.com\/v\/))([a-zA-Z0-9_-]+)/', $item, $id)) {
                        $id = $id[5];
                        //BNW $sProto = 0 == strncmp('https', BX_DOL_URL_ROOT, 5) ? 'https' : 'http';
                        $html = str_replace($result[0][$key], '<img class="YouTubeIframe" width="' . $width . '" height="' . $height . '" src="//www.youtube.com/embed/' . $id . '">', $html);
                    }
                }
            }
        }
        return $html;
    }

Fix the bug of TinyMCE 4 and TinyMCE 5 according to YouTube instructions "Embed videos & playlists":

https://support.google.com/youtube/answer/171780?hl=en

Example:

<iframe width="560" height="315" src="//www . youtube . com/embed/9TPboYG" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Step 6: Modify the YourWebsite/plugins/tinymce/plugins/media/plugin.min.js

Step 7: Search for "w:560, h:314" and replace it with "w:560, h:315" (3 times)

Step 8: Delete "cache" and "cache_public" all cache files.

Step 9: If you have to use OPcache you must also click the "Reset cache", and delete all Apache caches.

Step 10: Clear the browser's cache

Step 11: Just put up a YouTube video to test it. you should get this HTML code:

<p><iframe src="//www . youtube . com/embed/2KQ3uWCSJKo" width="560" height="315" allowfullscreen="allowfullscreen"></iframe></p>

good luck.

Sorry I am confused. Is this a Dolphin or UNA issue?

 
Dolphin issue. He is just taking htmlpurifier code from UNA to fix a dolphin problem.

deano, Thank you so much. Yes, this is Dolphin issue.

If I just report that YouTube can’t use the full screen issue, one year later (maybe two), the BOONEX team will solve this problem in Dolphin 7.4.3 or 7.5.

So I decided to report the problem at the same time, but also to find a way to solve the problem.

Please delete the "BNW", it is a typing error. Sorry.