Bug: YouTube video turns into a black rectangle next to the {details} tag

VadimLjovkin commented 5 months ago

Prerequisites

[X] I'm reporting the issue to the correct repository.
[X] I am running the latest version of this plugin (if not, please upgrade first).
[X] I checked the README.md and Wiki documentation but did not find my answer.
[X] I searched to make sure that this issue had not already been reported.
[X] I have, or I know someone who has, the ability and willingness to test the fix on a Moodle LMS-based site.
[X] I am submitting no more than one bug report per issue ticket (please do not submit multiple bugs in one issue ticket).
[X] I understand that support is provided by volunteer(s).

What happened?

Thank you for the wonderful plugin! If I use the {details} tag next to a YouTube video link, the video cover turns into a black rectangle and stops being active (clicking on the video does not cause the video to play). This has always worked, but in a recent update, the video stopped displaying and turned into a black rectangle. However, if multiple videos are posted in a row, only the first one turns into a black rectangle. The others display fine, even if the {details} tag is used next to them.

What do you think should have happened?

This has always worked, but in a recent update, the videos stopped displaying and turned into a black rectangle.

Steps to reproduce

On the course homepage, create a topic and when editing it, hide some of the text used in the {details} tag. After this tag place an active link to the YouTube video. Usually the YouTube link turns into the cover of the active video.
Duplicate the topic to get a full copy.
Refresh the page (F5) to see that the video from the top topic is displayed as an inactive black rectangle, while the video from the bottom topic is displayed correctly - the cover art is visible and you can view the video. This situation I have captured in the screenshot.

Screenshots

YouTube videos stop displaying

Moodle version

4.3.1+ (Build: 20231215)

Installed Moodle UI Language packs.

[ ] English only
[ ] One or more other languages/regional dialects (specify below)
[ ] Other

If other language(s), please specify

Russian

Workaround

If you place one opening {details} or one closing {/details} tag higher on the page, the video below will be displayed correctly. It won't work if you place such a tag below, after the video.

Additional information

I don't use other plugins, but disabling this plugin makes YouTube videos display correctly.

Sorry for bad English, I use a translator.

System information

Client Device type: Desktop Client Operating System: Windows Client Web Browser: Firefox, Google Chrome, Edge.

Code of Conduct

[X] I have read and agree to the project's code of conduct.

michael-milette commented 5 months ago

Hi @VadimLjovkin ,

I am not sure that this is related to FilterCodes. I recently experienced the same issue in Moodle 4.3.2+ when inserting YouTube videos. I was not using FilterCodes in that situation. I eventually got it to work properly by removing all other HTML content on the same line as the video including leading and trailing spaces.

I will try your steps to reproduce it and see if I can determine what might be going on.

Best regards,

Michael

aindril commented 5 months ago

Hi Michael! First thank you for this wonderful plugin. I am exploring this to add more personalization for our students on our Moodle site. I am facing a major challenge that I have tested on moodle 3.9 and 4.1. As soon as I enable this plugin, all embedded youtube videos on our moodle site stop working and it becomes a small black box. However, as soon as I disable the filtercode plugin it starts working again.

I am also using a openAi chat block on my site and the filtercodes mentioned in the following URL are not working on the source of truth. https://www.tngconsulting.ca/enhancing-openai-chat-block-for-moodle-lms-with-filtercodes/

Please help! keeping both would be critical for us.

Regards, Aindril

michael-milette commented 5 months ago

Hi @aindril ,

I am not sure what is going on with your site. Moodle 4.3 with the latest version of FilterCodes here on GitHub does not seem to have the same problems.

Here are some screenshots I just took:

To help you fix your issue, I need to either be on your system to do the diagnostic or I need to be able to reproduce the issue. I suggest that you try:

Using the boost theme.
The latest version of FilterCodes here on GitHub.
Checking the troubleshooting tips in the README.md file that came with your plugin, especially the part about making sure that FilterCodes is moved up to the top of the list of filters and that it is enabled for both content and headings.

If none of these steps help you, let me know and I will put together a Moodle 3.9 site (mine doesn't currently work since I upgraded to PHP 8.x for Moodle 4.3).

As for the OpenAI Chat block, again, I am using the latest 2.0.1 in Moodle 4.3 with all the FilterCodes listed in the article and it is working fine for me. Could you make sure that you are using a recent release of the OpenAI Chat Block? Support for Moodle filters was only added a few months ago.

Let me know how your troubleshooting goes.

Best regards,

Michael

michael-milette commented 5 months ago

Hi @VadimLjovkin ,

Unfortunately, I could not reproduce the issue that you are experiencing. I had no trouble putting the set of details/summary tags above and below the video.

It works! My suggestion would be to view the HTML source code and make sure that there is no unexpected HTML tags that ended up inside the FilterCodes tags.

If that doesn't help, try the latest version of FilterCodes here on GitHub. There was a bug a year or two ago with the way tags were being rendered but that has long since been fixed.

Hope you find this information useful.

Best regards,

Michael

aindril commented 5 months ago

Hi @michael-milette ,

Thanks for the inputs. I will troubleshoot as per the steps provided. Following is a sample code of how we embed the youtube video on the LMS inside a "Page" .

With the Filtercodes enabled, this ends up being a black box:

Can you please see if this can be used to replicate the issue at your end.

Regards, Aindril

VadimLjovkin commented 5 months ago

@michael-milette I apologize! I missed the need to move FilterCodes to the beginning of the filter list! I did that and now the YouTube videos are displaying as they should! Thank you so much for your helpful plugin and patience with your users!!! Sorry, my mistake took up your time. I wish you health and your plugin further development!

michael-milette commented 5 months ago

You're welcome @VadimLjovkin . Glad you figured out the solution.

Best regards,

Michael

michael-milette commented 5 months ago

Hi @aindril ,

I pasted your source code exactly as is into my editor. I am not sure what the YouTube thumbnail is supposed to look like but it looks like it is rendering as expected.

I do recommend that you consider cleaning up the HTML. For example, there is no point in using the 'u' tag and the 'strong' tag. There is also no point in adding all that formatting around the video. That said, it did not change anything when I removed the extra tags. It still works.

Did you go through the troubleshooting steps in the README.md file?

Best regards,

Michael

aindril commented 5 months ago

Hi @michael-milette , thanks for the inputs. I will first try the cleaning up of the HTML, as both versions have the same issue. In case that does not work, I will do the troubleshooting steps in the README.md file.

Regards, Aindril

aindril commented 5 months ago

Hi @michael-milette , Thanks for your help. It looks like some issue with my Moodle JS Player. When I am using the original Youtube embed code that calls the youtube player, it works:

" "

Now I will try and test the OpenAI plugin as well and see what is going wrong there. It could be the version issue that does not support filtercodes.

Thanks. I will keep you posted.

Regards, Aindril

michael-milette / moodle-filter_filtercodes