Embedded YouTube video in carousel in Blazor WASM - Stack Overflow

admin管理员组

文章数量:1244317

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="; 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?

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/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?

• blazor
• blazor-webassembly
• blazor-bootstrap

Share Improve this question Follow edited Feb 16 at 20:28 marc_s 755k184184 gold badges1.4k1.4k silver badges1.5k1.5k bronze badges asked Feb 16 at 20:24 SamSam 30.3k7575 gold badges252252 silver badges461461 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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/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>

本文标签： Embedded YouTube video in carousel in Blazor WASMStack Overflow