Summernote video embed has a static width of 640px which makes it unusable in mobile devices

Summernote embedded videos have the width set to 640px in the summernote-lite.min.js. This is larger than most mobile app widths.

Wappler is auto-adding the file from https://cdn.jsdelivr.net/npm/summernote/dist/summernote-lite.min.js. I attempted to remove and save the CDN file locally, then edit the file to adjust the width from 640px to 100%, but Wappler keeps adding the CDN file.

Has anyone dealt with this before?

We deal with both the problems manually.
We use a modified local JS file for summernote to better manage the width of video, and remove the CDN link via Git/VSCode before committing.

When developing locally, we have to keep removing the CDN include from layout page, if we are working on summernote integration.
If not, we don’t bother removing it until we have to commit the layout page in Git.

It seems there needs to be bigger discussion around using CDN or local for all components given how many times this has been asked for Tagify as well.

1 Like

You can use this as a workaround if you don’t want to remove the link before every push to git or when working locally Tagify not working again after their last cdn update

Can you not style this via CSS?
What video are you embeding - a youtube video or you upload a video to your server? Also where do you want to change its size - on the resulting page, where you use the generated HTML or inside the summernote itself?

No, you cannot style via CSS.

The embed is an iframe, and the width and height are defined in summernote-lite.min.js for each video type (youtube, vimeo, etc.). Search for 640 and you’ll see 5 references to each video type.

I want to change the size in the js file since that’s where it’s set.

Since the issue is the fixed size the embed would need to be smaller everywhere (i.e. in Summernote and when displayed on page.)

Are you sure about that? I just ran a quick test locally, and tested with a YT video embed. Styling the class used works fine in my test:

the class i see and styled is:

iframe.note-video-clip {
    width: 320px;
}

Well, I stand corrected. :slight_smile: I didn’t think you could override inline styles of an iframe.

1 Like