Convert a YouTube video URL to embed code

Question

I'm using this to convert YouTube URL to embed URL.

text(t).html().replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com)\/(?:watch\?v=)?(.+)/g, '<iframe width="320" height="280" src="//www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>')

How can I make it ignore itself?

t = $('<div></div>').text(t).html().replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com)\/(?:watch\?v=)?(.+)/g, '<iframe width="400" height="380" src="//www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>')

and an embedded link

<iframe width="560" height="315" src="//www.youtube.com/embed/1adfD9" frameborder="0" allowfullscreen></iframe>

Or, In other words, how can I make it work only on links like this and ignore everything else?

http://www.youtube.com/watch?v=1adfD9
www.youtube.com/watch?v=1adfD9
youtube.com/watch?v=1adfD9

Possible duplicate of How to convert a youtube video url to the iframe embed code, using jQuery on page load? — AncientSwordRage, Commented Jul 18, 2016 at 23:47

Илья Зелень · Accepted Answer · 2019-11-24 19:31:06Z

I'd be inclined to simply grab the video ID per this question and use it to formulate your embed markup as you like.

http://jsfiddle.net/isherwood/cH6e8/

function getId(url) {
    const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
    const match = url.match(regExp);

    return (match && match[2].length === 11)
      ? match[2]
      : null;
}
    
const videoId = getId('http://www.youtube.com/watch?v=zbYf5_S7oJo');
const iframeMarkup = '<iframe width="560" height="315" src="//www.youtube.com/embed/' 
    + videoId + '" frameborder="0" allowfullscreen></iframe>';

console.log('Video ID:', videoId)

Here's a more elaborate demo.

isherwood · Accepted Answer · 2023-11-24 15:45:37Z

You can get the embed code by using the oembed API. There may be multiple variants of the YouTube URL and using regex may not be an optimal solution.

https://www.youtube.com/oembed?url=<URL>&format=<FORMAT>

example:

https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=gBrmnB5aOSI&format=json

The response you will get is this, from which you can use the HTML data for the iframe:

{
"type": "video",
"thumbnail_width": 480,
"provider_name": "YouTube",
"title": "Intro To Live Streaming on YouTube",
"thumbnail_height": 360,
"provider_url": "https://www.youtube.com/",
"version": "1.0",
"height": 270,
"author_name": "YouTube Creators",
"html": "<iframe width=\"480\" height=\"270\" src=\"https://www.youtube.com/embed/gBrmnB5aOSI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>",
"author_url": "https://www.youtube.com/user/creatoracademy",
"width": 480,
"thumbnail_url": "https://i.ytimg.com/vi/gBrmnB5aOSI/hqdefault.jpg"
}

mate.gvo · Accepted Answer · 2021-02-10 16:31:23Z

11

I think the simplest solution is this:

ytUrl = "https://www.youtube.com/watch?v=DGIXT7ce3vQ"
// replace:
ytUrl.replace('/watch?v=', '/embed/')

answered Feb 10, 2021 at 16:31

mate.gvo

1,14114 silver badges21 bronze badges

Add a comment |

phlare · Accepted Answer · 2017-12-08 05:07:57Z

I've been using this pair of functions to convert youtube links in a block of html from a wysiwyg editor into embedded iframes.

As with other solutions, this can still mangle some other html in the block.

works with multiple videos in one block of text
works with http or https links
works with both the direct url of the video youtube.com/watch?v=UxSOKvlAbwI and the share links youtu.be/UxSOKvlAbwI

code:

createYoutubeEmbed = (key) => {
  return '<iframe width="420" height="345" src="https://www.youtube.com/embed/' + key + '" frameborder="0" allowfullscreen></iframe><br/>';
};

transformYoutubeLinks = (text) => {
  if (!text) return text;
  const self = this;

  const linkreg = /(?:)<a([^>]+)>(.+?)<\/a>/g;
  const fullreg = /(https?:\/\/)?(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([^& \n<]+)(?:[^ \n<]+)?/g;
  const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([^& \n<]+)(?:[^ \n<]+)?/g;

  let resultHtml = text;  

  // get all the matches for youtube links using the first regex
  const match = text.match(fullreg);
  if (match && match.length > 0) {
    // get all links and put in placeholders
    const matchlinks = text.match(linkreg);
    if (matchlinks && matchlinks.length > 0) {
      for (var i=0; i < matchlinks.length; i++) {
        resultHtml = resultHtml.replace(matchlinks[i], "#placeholder" + i + "#");
      }
    }

    // now go through the matches one by one
    for (var i=0; i < match.length; i++) {
      // get the key out of the match using the second regex
      let matchParts = match[i].split(regex);
      // replace the full match with the embedded youtube code
      resultHtml = resultHtml.replace(match[i], self.createYoutubeEmbed(matchParts[1]));
    }

    // ok now put our links back where the placeholders were.
    if (matchlinks && matchlinks.length > 0) {
      for (var i=0; i < matchlinks.length; i++) {
        resultHtml = resultHtml.replace("#placeholder" + i + "#", matchlinks[i]);
      }
    }
  }
  return resultHtml;
};

jsfiddle

i saw this was not working with specific time start in video (youtube.com/watch?v=B6ZQVXA0IRw&t=796s). Any help for this. — bring2dip, Commented Dec 7, 2017 at 16:37
I’ll see if I can work that in. Turns out this snippet is mangling links out to YouTube videos that are meant to remain links (inside a fully formed a tag) so I need to fix that anyway. It’s on my todo list for today/tomorrow at least — phlare, Commented Dec 7, 2017 at 16:41
It does create player from link that has the link as the hypertext <a href="youtu.be/fDVQPBvZOeo">https://youtu.be/fDVQPBvZOeo</…> if the link is like this <a href="youtu.be/fDVQPBvZOeo">video</a> it leave the link untouched, which is I guess the planing feature in both cases — 2046, Commented Feb 10, 2018 at 15:50
its working good but only for ONE div=id, how to change it for classname? const htmlContent = document.getElementsByClassname(\'post\');//not working — newbie.user88, Commented Dec 22, 2022 at 4:24

isherwood · Accepted Answer · 2023-11-24 15:47:50Z

7

Here is what I used to convert the YouTube URL to embed and make the video work.

<script>
    function myFunction() {
        var str = "https://www.youtube.com/watch?v=1adfD9";
        var res = str.split("=");
        var embeddedUrl = "https://www.youtube.com/embed/"+res[1];
        document.getElementById("demo").innerHTML = res;
    }
</script>

I hope this helps

edited Nov 24, 2023 at 15:47

isherwood

60.5k16 gold badges119 silver badges164 bronze badges

answered Nov 25, 2019 at 10:34

VishalParkash

4863 silver badges16 bronze badges

2

This should work well as long as there aren't any other URL parameters. If there are you'll also get the next parameter key as the result of your split function.
– isherwood
Commented Jun 10, 2020 at 12:33
Of course, but you can use limit as the second parameter. string.split(separator, limit) I hope this help you
– VishalParkash
Commented Jun 15, 2020 at 6:40
It is pretty useless as it doesn't work for YouTube URL's like: youtu.be/rOyHiaz9Glk?si=6uJQhy4_XzIJBsO_ | youtu.be/MFE7WNbvoPs | m.youtube.com/watch/391YMrjy71s | youtube.com/watch?v=-gDUUp5iKns&ab_channel=someChannelName
– konieckropka
Commented Apr 16 at 17:27

Add a comment |

Jim Infantino · Accepted Answer · 2015-01-03 17:53:45Z

function popYouTubeId(buttonid) {
    var youTubeUrl = $(buttonid).attr('data-url');
    var youTubeId;
    var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
    var match = youTubeUrl.match(regExp);
    if (match && match[2].length == 11) {
       youTubeId = match[2];
    } else {
        youTubeId = 'no video found';
   }
   $('#ytvideo').html('<div class="youtubepopup"><a class="closex">x</a><iframe width="560" height="315" src="//www.youtube.com/embed/' + youTubeId + '" frameborder="0" allowfullscreen></iframe></div>');
   $('a.closex').click( function(){
       $('.youtubepopup').remove();
   });
}

var buttonid;

$('.videobutton').click( function(){
    buttonid = '#'+$(this).attr('id');
    popYouTubeId(buttonid);
});

Some elaboration on isherwood's demo for your consideration. Simplifies, and packs more into the function for multiple use.

jsfiddle

SAUMITRA KUMAR · Accepted Answer · 2020-09-29 11:44:15Z

1

This works fine for me on ReactJS

<iframe src={`https://www.youtube.com/embed/${url.split('='}[1]&autoplay=false`} controls allowfullscreen />

answered Sep 29, 2020 at 11:44

SAUMITRA KUMAR

7476 silver badges7 bronze badges

Add a comment |

jps · Accepted Answer · 2020-10-06 13:13:55Z

1

Who needs jQuery. Below is pure javascript code using URL() function to get v parameter from YouTube URL and insertAdjacentHTML() from replacing current <script> tag with <iframe>

<script>
const url = "https://www.youtube.com/watch?v=qRv7G7WpOoU";
const v = new URL(url).searchParams.get('v');

document.currentScript.insertAdjacentHTML(
  'beforebegin',
  `<h1>Video id=${v}</h1>` +
  `<iframe
      width="480" height="270"
      src="https://www.youtube.com/embed/${v}?feature=oembed"
      allowfullscreen></iframe>`
  );
</script>

edited Oct 6, 2020 at 13:13

jps

21.7k16 gold badges79 silver badges83 bronze badges

answered Oct 6, 2020 at 13:10

OzzyCzech

10.1k3 gold badges53 silver badges35 bronze badges

Add a comment |

Reuben B · Accepted Answer · 2022-07-01 09:31:57Z

Doesn't this way of getting the embedded id from desktop links seem easier to understand?

 const convertLinkToEmbedId = () => {
    const link = "https://www.youtube.com/watch?v=gBrmnB5aOSI&...";
    return link.substring(link.indexOf("=") + 1, link.indexOf("&"));
  };

You can then embed it this way:

 <iframe
      width='560'
      height='315'
      src={`https://www.youtube.com/embed/${convertLinkToEmbedId()}`}
      title='YouTube video player'
      frameborder='0'
      allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;fullscreen;'
    >
</iframe>

The problem is that this wouldn't work where there the id isn't between '=' and '&' :(

OneScriptMan · Accepted Answer · 2023-12-25 08:50:45Z

Created a Angular pipe for this case, which can simply be used wherever needed, it converts the link directly in the template.

HTML template:

<iframe
                width="560"
                height="315"
                [src]="PAST_YOUR_YTUBE_LINK_HERE | ytubePipe"
                title="YouTube video player"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen
              >
              </iframe>

Pipe ts file:

    import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Pipe({
  name: 'ytubePipe',
  standalone: true,
})
export class YtubePipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) {}

  createYoutubeEmbed(key: string): string {
    return `https://www.youtube.com/embed/${key}`;
  }

  transform(url: string): SafeResourceUrl {
    if (!url) {
      return '';
    }

    let videoId: string | null = null;
    const fullreg =
      /(https?:\/\/)?(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([^& \n<]+)(?:[^ \n<]+)?/g;
    const match = fullreg.exec(url);
    if (match && match.length > 4) {
      videoId = match[4];
    }

    if (videoId) {
      const safeUrl = this.createYoutubeEmbed(videoId);
      return this.sanitizer.bypassSecurityTrustResourceUrl(safeUrl);
      // return safeUrl;
    }

    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    // return url;
  }
}

BiGBaDWolF · Accepted Answer · 2020-12-09 15:19:13Z

-2

 @if (path.Contains('&'))
                            path = path.Split('&')[0];

                <iframe width="690" height="400" src="@Model.YourModelNameHERE.Replace("watch?v=","embed/")" frameborder="0" allowfullscreen></iframe>

C# Razor pages solution!

answered Dec 9, 2020 at 15:19

BiGBaDWolF

396 bronze badges

Add a comment |

Collectives™ on Stack Overflow

Convert a YouTube video URL to embed code

11 Answers 11

Not the answer you're looking for? Browse other questions tagged
javascript
jquery
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

Not the answer you're looking for? Browse other questions tagged javascriptjquery or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
javascript
jquery
or ask your own question.