YouTube iframe code gets improperly escaped in rich text mode?

[jywarren]

Someone in the plots2 project (https://github.com/publiclab/plots2/issues/9164) pasted this in, presumably in rich text mode, and the page broke - the iframe code seemed to get malformed and then the rest of the page wouldn't render.

<iframe width="560" height="315" src="
https://www.youtube.com/embed/5LAJ3_Zvsg4" title="YouTube video player"
frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<iframe width="560" height="315" src="
https://www.youtube.com/embed/FxYbXTV5MT4" title="YouTube video player"
frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<iframe width="560" height="315" src="
https://www.youtube.com/embed/5z4MXCkV6S0" title="YouTube video player"
frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<iframe width="560" height="315" src="
https://www.youtube.com/embed/ICrQHCq89pk" title="YouTube video player"
frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

I was able to paste it in "markdown" mode, not "rich text" and i wonder if that made it work.

I think @17sushmita's note that allowfullscreen became allowfullscreen\="" when in the rich text mode seems very likely to be our rich text editor code trying to "fix" that parameter but in fact breaking it.

Let's try to reproduce this by pasting the above into the rich text mode editor and seeing if it causes a page cutoff or rendering problem?

If not, it could somehow relate to the action of publishing it after pasting in rich text mode in which case we could move back to the plots2 project to investigate further.

Thanks, all!!!

[RaviAnand111]

Hey @jywarren @TildaDares , is this issue still open, I want to work on it, I tried to embed a your youtube video, publiclab editor is working fine, but on embedding the links given by @jywarren , the editor is showing abnormalites and not showing video frames.

[TildaDares]

Hi @RaviAnand111, yeah you can work on this. Thanks!

[RaviAnand111]

https://user-images.githubusercontent.com/59113935/148217987-7665ea09-a39c-453b-97d0-194167268eb7.mp4

Hey everyone @jywarren @TildaDares , I have found this, please share your views on it. ThankYou

[RaviAnand111]

If the video is not working, then this is the link of video on my drive. YouTube Iframe video @TildaDares @jywarren Thanks

[TildaDares]

@RaviAnand111 I think the problem is the line break that is added to the iframe code after copying. I copied the iframe code from the top and then removed all line breaks which are displayed in the form LF and it worked. I think we need to find a way to remove line breaks after input.

[RaviAnand111]

oh great, I will try to recreate this and find a way to how to remove line breaks, Thanks

[RaviAnand111]

so what I think is there is no problem with the editor and the youtube embed tool, it's just that the iframe code at the top is wrong as there are line breaks in it, anyone can copy embed code from youtube and paste it in the editor without any problem. What do you think? @TildaDares @jywarren

[TildaDares]

@RaviAnand111 I tried using this SO answer to remove the line breaks but that removes the iframe completely https://stackoverflow.com/a/51602415/11953728. I also tried pasting the code above in other markdown editors and it worked.

@jywarren is there a way to remove the line breaks before parsing to markdown? https://github.com/publiclab/PublicLab.Editor/blob/1ab7b20561068c5d3f8061f1de14bae38a4314d3/src/modules/PublicLab.RichTextModule.Embed.js#L25