I am trying to embed Youtube links in anchor tags. However, when clicking on it, it opens a new link with an error message “www.youtube.com is blocked”. I think it might have to do with Youtube since it works for other websites.
Below is a Vue SFC that I try to replicate from a Svelte example. In Svelte example, the link is not blocked.
Here is the link to the vue playground for the code below.
<code><template>
<div>
<h1>The Famous Cats of YouTube</h1>
<ul>
<li v-for="({ id, name }, i) in cats" :key="id">
<a
target="_blank"
rel="noreferrer"
:href="`https://www.youtube.com/watch?v=${id}`">
{{ i + 1 }}: {{ name }}
</a>
</li>
</ul>
</div>
</template>
<script setup>
let cats = [
{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
{ id: 'z_AbfPXTKms', name: 'Maru' },
{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
];
</script></code>
<code><template>
<div>
<h1>The Famous Cats of YouTube</h1>
<ul>
<li v-for="({ id, name }, i) in cats" :key="id">
<a
target="_blank"
rel="noreferrer"
:href="`https://www.youtube.com/watch?v=${id}`">
{{ i + 1 }}: {{ name }}
</a>
</li>
</ul>
</div>
</template>
<script setup>
let cats = [
{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
{ id: 'z_AbfPXTKms', name: 'Maru' },
{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
];
</script></code>
<template>
<div>
<h1>The Famous Cats of YouTube</h1>
<ul>
<li v-for="({ id, name }, i) in cats" :key="id">
<a
target="_blank"
rel="noreferrer"
:href="`https://www.youtube.com/watch?v=${id}`">
{{ i + 1 }}: {{ name }}
</a>
</li>
</ul>
</div>
</template>
<script setup>
let cats = [
{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
{ id: 'z_AbfPXTKms', name: 'Maru' },
{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
];
</script>