1Here is an example of youtube appearing in markdown.
2
3https://www.youtube.com/watch?v=dQw4w9WgXcQ

1// Matching the ID for Youtube Links
2export const youtubeRegEx =
3  /^(?:https?:\/\/)?(?:i\.|www\.|img\.)?(?:youtu\.be\/|youtube\.com\/|ytimg\.com\/)(?:embed\/|v\/|vi\/|vi_webp\/|watch\?v=|watch\?.+&v=)((\w|-){11})(?:\S+)?$/;
4
5// ... match against the markdown depending on your parser
6
7// Example Youtube iframe attributes
8const youtubeIframeAttributes = {
9  src: `https://www.youtube.com/embed/${ID}?modestbranding=1`,
10  allow:
11    "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
12  allowfullscreen: true,
13  frameborder: 0,
14};

1Here is an example of vimeo appearing in markdown.
2
3https://vimeo.com/783453158

1// Matching the ID for Vimeo Links
2export const vimeoRegEx =
3  /https?:\/\/(?:vimeo\.com\/|player\.vimeo\.com\/)(?:video\/|(?:channels\/staffpicks\/|channels\/)|)((\w|-){7,9})/;
4
5// ... match against the markdown depending on your parser
6
7// Build the attributes to be used in an iframe for displaying vimeo
8const vimeoIframeAttributes = {
9  src: `https://player.vimeo.com/video/${ID}`,
10  frameborder: "0",
11  allow: "autoplay; fullscreen; picture-in-picture",
12  allowfullscreen: true,
13};

1Here is an example of including SoundCloud content within markdown
2
3https://soundcloud.com/rick-astley-official/never-gonna-give-you-up-4?utm_source=clipboard&utm_medium=text&utm_campaign=social_sharing

1// SoundCloud
2export const soundcloudRegEx =
3  /https?:\/\/(?:w\.|www\.|)(?:soundcloud\.com\/)(?:(?:player\/\?url=https\%3A\/\/api.soundcloud.com\/tracks\/)|)(((\w|-)[^A-z]{8})|([A-Za-z0-9]+(?:[-_][A-Za-z0-9]+)*(?!\/sets(?:\/|$))(?:\/[A-Za-z0-9]+(?:[-_][A-Za-z0-9]+)*){1,2}))/;
4export const soundcloudRegExAlternative =
5  /api\.soundcloud\.com\/tracks\/([a-z\d]+)/i;
6
7// ... match against the markdown depending on your parser
8
9// Build the attributes to be used in an iframe for displaying soundcloud
10const soundcloudIframeAttributes = {
11  src: `https://w.soundcloud.com/player/?url=https://soundcloud.com/${ID}&color=%23cad5dd&auto_play=false&hide_related=true&show_comments=false&show_user=true&show_reposts=false&show_teaser=true`,
12  scrolling: "no",
13  frameborder: "no",
14  allow: "autoplay",
15  width: "100%",
16  height: 166,
17};

1Here is an example of a spotify playlist appearing within markdown
2
3https://open.spotify.com/playlist/37i9dQZF1DX9wC1KY45plY

1// Spotify
2export const spotifyURLRegex =
3  /https?:\/\/(?:embed\.|open\.)(?:spotify\.com\/)(?:(album|track|playlist)\/|\?uri=spotify:track:)((\w|-){22})/;
4export const spotifySymbolRegex =
5  /spotify:(?:(album|track|playlist):|\?uri=spotify:track:)((\w|-){22})/;
6
7// ... match against the markdown depending on your parser
8
9// Build the attributes to be used in an iframe for displaying spotify playlist
10const spotifyIframeAttributes = {
11  src: `https://open.spotify.com/embed/${type}/${id}`,
12  allow:
13    "autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture",
14  allowtransparency: "true",
15  allowfullscreen: "true",
16  style: { borderRadius: "12px" },
17  width: "100%",
18  height: "152",
19  // loading: 'lazy',
20  frameborder: 0,
21};