#Need help making code use embeds instead of URL's

15 messages · Page 1 of 1 (latest)

velvet wharf
# 
import ImageSlider from "./ImageSlider";
const App = () => {
  const slides = [
    { url: "http://localhost:3000/image-1.jpg", title: "beach" },
    { url: "http://localhost:3000/image-2.jpg", title: "boat" },
    { url: "http://localhost:3000/image-3.jpg", title: "forest" },
    { url: "http://localhost:3000/image-4.jpg", title: "city" },
    { url: "http://localhost:3000/image-5.jpg", title: "italy" },
  ];
  const containerStyles = {
    width: "500px",
    height: "280px",
    margin: "0 auto",
  };
  return (
    <div>
      <h1>Hello monsterlessons</h1>
      <div style={containerStyles}>
        <ImageSlider slides={slides} />
      </div>
    </div>
  );
};

export default App;
``` Trying to get this code to work using youtube embeds instead of the URL's but cannot figure it out, any insight would be appreciated
mossy jewelBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

velvet wharf
oblique tiger
# velvet wharf ```jsx import ImageSlider from "./ImageSlider"; const App = () => { const slid...

Do you mean you want to use youtube URLs instead of JPG image URLs? I don't think this is possible entirely in the client because of CORS and other cross-domain restrictions. For each youtube URL you want to show a thumbnail, you would need to figure out the thumbnail in your server, maybe by visiting the page and finding it in the HTML

As an alternative, you can check how YouTube generate the thumbnail URLs and check if you can do this in a deterministic way in the client, so you can skip the need of a server

velvet wharf
#

Nah, youtube has embeds like this jsx <iframe width="560" height="315" src="https://www.youtube.com/embed/SK9AlIbexOE?si=L0hLBAu3F8rbTyz_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> I can get them to render if I make it a react component, but when I paste the react component in instead of jsx { url: "http://localhost:3000/image-1.jpg", title: "beach" } it wont render

oblique tiger
#

Well yeah an embed is not an image, the img tag won't render it

#

You need to figure out how they generate the thumbnail URL and do the same in your client

velvet wharf
#

dunno why the box looks like that sorry

oblique tiger
#

The component you shared is showing the images through the background-image property on CSS, which only accept image URLs

#

If your use case is fine with embeds, you could just add the embed directly in the carousel 🤔

velvet wharf
#

That's what I was hoping to accomplish, I guess I'm going about it the wrong way then :/

#

I had it that way while using slick react carousel and it worked fine just had a css issue I couldn't figure out, so I opted to make one from scratch and this was the best tutorial I could find but I didn't realize it would only accommodate images

oblique tiger
#

This one probably works with embeds, but you will need to adjust it a bit

velvet wharf
#

Well you've given me a great start to finding the error, gonna go ahead and mark it as solved since you answered the original question. Thank you for the help!