youtube links validation

by zakariamouhid

HTML

<form id="form" onsubmit="event.preventDefault();console.log('valid')">
  <label for="pwd">Youtube link:</label>
  <input required="" type="link" id="link" name="link" pattern="^https?:\/\/(?:(?:(?:www|m)\.)?youtube\.com\/watch\/*\?(?:.*?&)?v=([\w\-_]+)(?:&.*?)?|youtu\.be\/([\w\-_]+)\/*(\?.*?)?)$" title="enter a valid youtube video url" value="https://m.youtube.com/watch?v=5">
  <input type="submit">
</form>

CSS

#link {
  border: solid 5px;
}
#link:valid {
  border-color: #0f0;
}
#link:not(:valid) {
  border-color: #f00;
}