Problem with mediaEmbed Feature Not Working as Expected

[Mamoun2020]

Description

I'm currently using the nova-ckeditor package (version 1.2.2) in my Nuxt.js project to implement a rich text editor. I'm trying to utilize the mediaEmbed feature to embed media content such as YouTube videos directly within the editor. However, I've encountered an issue where the embedded media is not rendering as expected on my Nuxt.js website.

Steps to Reproduce

1. Install and set up the nova-ckeditor package (version 1.2.2) in a Nuxt.js project.
2. Configure the mediaEmbed feature in the CKEditor settings to support YouTube videos (I followed the instructions in the package documentation).
3. Open the CKEditor and use the insert media button to insert a YouTube video link (e.g., https://www.youtube.com/watch?v=ERKqYBTpUfk) in the editor.
4. The preview in the CKEditor shows the embedded YouTube video correctly.
5. However, when the content is rendered on the Nuxt.js website, the embedded video is not displayed.

Expected Behavior

I expected that when I add a YouTube video link in the CKEditor by insert media button, the embedded video would also be displayed correctly on the Nuxt.js website when the content is rendered.

Actual Behavior

The embedded YouTube video is not displaying as expected on the Nuxt.js website. Instead, only the link to the YouTube video is shown.

Additional Information

• Package Version: nova-ckeditor version 1.2.2

Possible Solutions (If Any)

I've tried rechecking the mediaEmbed configuration and ensuring that I've followed the steps correctly. However, I'm not sure what might be causing the issue on the Nuxt.js website.

Other Notes

I appreciate any assistance or insights into resolving this issue. If there's any additional information needed from my end, please let me know. Thank you!

[Mamoun2020]

I've tried to add this:

                'mediaEmbed' => [
                    'previewsInData' => true,
                    'providers'      => [
                        [
                            'name' => 'YouTube',
                            'url'  => '/^https:\/\/www\.youtube\.com\/watch\?v=([a-zA-Z0-9_-]+)$/',
                            'html' => '<div class="media-embed"><iframe src="https://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe></div>'
                        ],
                        // Add more providers as needed
                    ],
                ],

in config/nova-ckeditor.php

[mostafaznv]

Hello @Mamoun2020, Could you please provide the HTML output that is stored in your database? I'll be glad to take a look and try to identify the issue.

[Mamoun2020]

Hello @mostafaznv this HTML output is stored in DB <figure class="media"><oembed url="https://www.youtube.com/watch?v=kgNRfVfeczU"></oembed></figure>

[Mamoun2020]

and I tried to add provider Youtube in mediaEmbed array in config/nova-ckeditor.php, This HTML output is stored in DB:

<figure class="media"><div data-oembed-url="https://www.youtube.com/watch?v=H13cW1pYYcY"><div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;"><iframe src="https://www.youtube.com/embed/H13cW1pYYcY" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe></div></div></figure><p><span lang="AR-AE" dir="ltr">&nbsp;</span></p>

The video appeared a few minutes after adding it, and when you return to the same page, it disappears

[mostafaznv]

I can't see any problem in that HTML output. As you can see here, everything works fine because there is an iframe, and the browser should take the responsibility to display your YouTube videos.

I believe the problem exists in your Nuxt.js application. If you can provide a reproduction link of your issue on that side, I may be able to help you troubleshoot it.

[Mamoun2020]

@mostafaznv this link for blog in staging env: https://staging.adel.ps/blogs/11 The video appeared a few minutes after adding it below image, than disappear

Thanks

[mostafaznv]

It appears that the API is responding properly, and I can see that the iframe exists in your content. However, when I directly open this page, there is no iframe or anything else in your HTML content. You can check this by viewing the source code: view-source:https://staging.adel.ps/blogs/11/

Interestingly, if you first open the blog list and then navigate to that specific post, the iframe works. This suggests that it might be related to SSR (Server-Side Rendering) in Nuxt.js. When you open the link directly, the page is rendered on the server, but when you navigate to the page, everything is handled on the client side.

Unfortunately, I can't assist any further without access to your source code. If I had access to the source code of pages/blogs/_id.vue, I might be able to provide more help.

[Mamoun2020]

Thanks @mostafaznv, This issue appeared when deploy nuxt.js 2 on aws s3. I'm happy to help you and would like to let you know that after I've tried the package, I can share some ideas for improvement as a new issue (enhancement or new features)

[mostafaznv]

Thank you, @Mamoun2020, for your support. Any ideas you have would be greatly appreciated. If your issue has been resolved, feel free to close this ticket. If you have any further questions, I'm here to assist.