How can I change the color of YouTube links to red in Editing Mode using a CSS snippet?

Custom CSS & Theme Design
1

This is the result I want to achieve:
image

I have wasted many hours trying to make it work but without any result.
I am only able to color the Youtube links into red in Reading View (but not in Editing View) with this snippet:

.markdown-preview-view a[href*="youtube.com"]
{
  color: red !important;
  font-weight: bold;
}

The html in Reading view is this:

reading mode
reading mode480×100 14.9 KB

While the html in Editing view is this:

editing mode
editing mode468×157 17.9 KB

As you can see the links in Editing view have an href="#" instead of the actual YouTube URL. This causes my CSS targeting href*="youtube.com" to not work

2

It looks like there’s not enough in the editor to target individual links with CSS (the second screen shot).

If I wanted something like this, I’d give Regex Mark a try: