youtu.be url does not work. I seems to work in an older version (0.8.10). Could you please fix as YouTube uses the youtu.be as default to share the url.

[jagisx]

Checklist

• I've looked at the documentation to make sure the behavior isn't documented and expected.
• I'm sure this is an issue with Summernote, not with my app or other dependencies (Angular, Cordova, React, etc.).
• I've searched through the current issues to make sure this hasn't been reported yet.
• My issue is pertinent to this repository of Summernote (jQuery), or I was unable to have my issue resolved from the relevant version I'm using, such as Angular, dJango, Rails or React. Please try your issue at the relevent repository first.
• I understand that issues without interaction for more than 14 days (2 weeks), may be closed at our discretion. We do this, as sometimes issues are abandoned. We may at our discretion, add issues to the relevant project to be looked at, or for maintainers to work through as time permits. This is to help keep issues relevant to the current version of Summernote, and to reduce clutter.
• I agree to follow the Code of Conduct that this project adheres to.

Steps to reproduce

No response

Expected behavior

The youtu.be url should display a video preview as it does with the youtube.com url.

Current behavior

When adding a youtube.com url the video preview displays but the youtu.be url does not display anything. The older version mention does in fact work.

Minimal example reproducing the issue

https://summernote.org/

Environment

• Summernote version: any version past 0.8.10
• Browser (with version): any browser
• OS/Platform (with version): windows 10 / 11

[DennisSuitters]

There was a PR merged recently to address YouTube and Instagram videos, you may need to build the project on your local machine to get the changes. I have no ETA when a new release will occur.

[jagisx]

Hello, thanks for the reply. I changed a single line of code in the .js file to fix the youtu.be url to work. Thank you.

…

On Mar. 25, 2024 at 8:04 p.m., Dennis Suitters ***@***.***> wrote: There was a PR merged recently to address YouTube and Instagram videos, you may need to build the project on your local machine to get the changes. I have no ETA when a new release will occur. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>

[DennisSuitters]

You can do that, obviously, just be aware that if you update, you'll have to edit that again.

[azeemh]

Hello, thanks for the reply. I changed a single line of code in the .js file to fix the youtu.be url to work. Thank you.
…
On Mar. 25, 2024 at 8:04 p.m., Dennis Suitters @.> wrote: There was a PR merged recently to address YouTube and Instagram videos, you may need to build the project on your local machine to get the changes. I have no ETA when a new release will occur. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.>

Hi which line did you change? i did a local yarn build as mentioned by Dennis, and now youtu.be links embed, but the code view doesn't accept iframe embed codes anymore.

this means any non youtube platform like a soundcloud widget etc doesn't embed.

i'll make a fork that's basically stable 8.1.8 with the youtu.be fix and link it here if someone can point me to the right direction.

[azeemh]

I don't know how to fix the code embedding in 8.1.9 but i was able to make a patch to summernote-lite.js 8.1.8 so that it uses the same regex as 8.1.9, enabling youtu.be and google drive as well as.

including the patched summernote.lite.js file here, and if you have a bootstrap version you can do the same patch I did:

I copied the regex patterns from 8.1.9 (around line 9080 in summernote-lite.js (CTRL+f or awk/grep for "createVideoNode")

      var ytRegExp = /(?:youtu\.be\/|youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=|shorts\/|live\/))([^&\n?]+)(?:.*[?&]t=([^&\n]+))?.*/;
      var ytRegExpForStart = /^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?$/;
      var ytMatch = url.match(ytRegExp);
      var gdRegExp = /(?:\.|\/\/)drive\.google\.com\/file\/d\/(.[a-zA-Z0-9_-]*)\/view/;
      var gdMatch = url.match(gdRegExp);
      var igRegExp = /(?:www\.|\/\/)instagram\.com\/reel\/(.[a-zA-Z0-9_-]*)/;
      var igMatch = url.match(igRegExp);
      var vRegExp = /\/\/vine\.co\/v\/([a-zA-Z0-9]+)/;
      var vMatch = url.match(vRegExp);
      var vimRegExp = /\/\/(player\.)?vimeo\.com\/([a-z]*\/)*(\d+)[?]?.*/;
      var vimMatch = url.match(vimRegExp);
      var dmRegExp = /.+dailymotion.com\/(video|hub)\/([^_]+)[^#]*(#video=([^_&]+))?/;
      var dmMatch = url.match(dmRegExp);
      var youkuRegExp = /\/\/v\.youku\.com\/v_show\/id_(\w+)=*\.html/;
      var youkuMatch = url.match(youkuRegExp);
      var peerTubeRegExp = /\/\/(.*)\/videos\/watch\/([^?]*)(?:\?(?:start=(\w*))?(?:&stop=(\w*))?(?:&loop=([10]))?(?:&autoplay=([10]))?(?:&muted=([10]))?)?/;
      var peerTubeMatch = url.match(peerTubeRegExp);
      var qqRegExp = /\/\/v\.qq\.com.*?vid=(.+)/;
      var qqMatch = url.match(qqRegExp);
      var qqRegExp2 = /\/\/v\.qq\.com\/x?\/?(page|cover).*?\/([^\/]+)\.html\??.*/;
      var qqMatch2 = url.match(qqRegExp2);
      var mp4RegExp = /^.+.(mp4|m4v)$/;
      var mp4Match = url.match(mp4RegExp);
      var oggRegExp = /^.+.(ogg|ogv)$/;
      var oggMatch = url.match(oggRegExp);
      var webmRegExp = /^.+.(webm)$/;
      var webmMatch = url.match(webmRegExp);
      var fbRegExp = /(?:www\.|\/\/)facebook\.com\/([^\/]+)\/videos\/([0-9]+)/;
      var fbMatch = url.match(fbRegExp);
      var $video;

and i used these to replace the corresponding section in 8.1.8.

So if you use summernote lite like I do, you can copy my whole summernote-lite.js file and use it with the normal css and js.map that ship with 8.1.8

Azeem's Summernote-lite 8.1.8.2 Video/Youtu.be Fix:

https://gist.github.com/azeemh/a8a933d7648c95eeb5847abd2aa13085