Embedded YouTube video in carousel in Blazor WASM

Question

I have a Blazor WASM stand-alone (targeting .NET 9) project and I'd like to have a video play list. Just videos... no thumbnails.

So far I'm not committed to any of the Blazor UI libraries but I find BlazorBootstrap to be a bit more agreeable so I tried using their Carousel control but no video is showing up on the page. No errors. Just no video. Blank space instead. Second and third items in the carousel -- which are simple text -- do show so the Carousel control is working -- see below.

Here's what my code looks like so far:

<div class="col-md-8">
    <Carousel>
        <CarouselItem Active="true">
            <div>
                <iframe src="http://www.youtube.com/embed/a3ICNMQW7Ok" frameborder="0" allow="autoplay;" allowfullscreen></iframe>
            </div>
        </CarouselItem>
        <CarouselItem>
            <div>This is just some text for now but I'll end up having another embedded video here...</div>
        </CarouselItem>
        <CarouselItem>
            <div>This is also some text which will be replaced with an embedded video here...</div>
        </CarouselItem>
    </Carousel>
</div>

Any suggestions how I can have a carousel of videos in my Blazor WASM app?

Answer 1

sounds like problem is related to the style, the following changes can help you

<Carousel>
    <CarouselItem Active="true">
        <div style="width: 100%; height: 400px; display: flex; justify-content: center; align-items: center;">
            <iframe 
                width="100%" 
                height="100%" 
                src="https://www.youtube.com/embed/a3ICNMQW7Ok" 
                frameborder="0" 
                allow="autoplay; encrypted-media" 
                allowfullscreen>
            </iframe>
        </div>
    </CarouselItem>
    <CarouselItem>
        <div>Another video will go here...</div>
    </CarouselItem>
    <CarouselItem>
        <div>More content here...</div>
    </CarouselItem>
</Carousel>