0

Certain platforms like GitBook allow you to insert an embed URL, like https://www.youtube.com/embed/eGUEAvNpz48, and it displays as a component on that website, as seen here:

enter image description here

I want to create my own embed component using SvelteKit and have it available at some URL, like https://test/embed, that I can plug in to platforms and have it display as a widget, but I'm not sure how to do that.

In simpler forms, my question is, how do I create an embed component like https://www.youtube.com/embed/eGUEAvNpz48 using SvelteKit?

Jacob Tucker
  • 132
  • 7

1 Answers1

0

To create embedded content in Svelte, is no different from what you do in vanilla HTML, you could simply use the iframe element.

Especially for YouTube video, you could make good use of share feature (shown as below)

Click the Share button -> Click Embed Click the Share button -> Click Embed

Copy the code that YouTube gave you here to your .svelte file Copy the code that YouTube gave you here to your .svelte file

Example

// src/routes/example/+page.svelte
<iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/obuyCkotJ_s"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen></iframe>
<p> welcome to my page </p>
louielyl
  • 745
  • 7
  • 9