Cannot resize video based on screen width

[Andrew Sabin]

Hello there Syncfusion Team,

Thank you again for all of your help in regards to my previous issues that I have had with setting up the rich text editor in my application.

I'm not sure if this is an issue specific to the Rich Text Editor, but it is something that is related to the Rich Text Editor's output.

I have been trying to resize different embedded YouTube videos using CSS to check for different screen widths and I haven't been able to do so. I've even tried using Regex to wrap different <iframe></iframe> html code segments with <div class="iframe-container" style="max-width: 560px;"> </div>, so that the CSS would be able to change the video width based on the screen width.

Here is the function that I am using to edit the html code generated by the RichTextEditor:

private string WrapIframesWithContainer(string htmlContent)
{
    if (string.IsNullOrEmpty(htmlContent))
    {
        return htmlContent;
    }

    var iframePattern = @"<iframe\s([^>]*)>";
    var replacement = @"<div class=""iframe-container"" style=""max-width: 560px;""><iframe $1>";

    htmlContent = Regex.Replace(htmlContent, iframePattern, replacement, RegexOptions.IgnoreCase);

    htmlContent = Regex.Replace(htmlContent, @"</iframe>", @"</iframe></div>", RegexOptions.IgnoreCase);

    return htmlContent;
}

Again, I'm not sure if this is something related to the Rich Text Editor or if it something else with my application. However, if you can help me out that would be great.

Thank you again for your time and help,
Andrew



[Vinitha Jeyakumar]

Hi Andrew,

Based on the information provided, this appears to be related to the responsive behavior of the embedded iframe rather than the Rich Text Editor itself. The Rich Text Editor typically renders the HTML content as provided, including any fixed dimensions set on the embedded YouTube iframe.

Your current approach of wrapping the iframe is fine; however, using only max-width: 560px on the container will not automatically make the video responsive. If the iframe still contains fixed width, height, or inline style attributes, they can prevent the video from resizing according to the screen width.

We recommend:

• Using a responsive container with CSS that maintains the video's aspect ratio.
• Setting the iframe width and height through CSS (width: 100%; height: 100%;) rather than fixed attributes.
• Removing any fixed width, height, or inline sizing styles from the iframe markup if they exist.
• Inspecting the rendered HTML in the browser's developer tools to check whether the iframe or any parent element has fixed dimensions.

From the code you've shared, the iframe wrapper logic looks correct. The most likely cause is that the embedded iframe still contains fixed sizing information that is overriding the responsive CSS.

Regards,

Vinitha