代码之家 › 专栏 › 技术社区 › Sam

在DateTimeWASM的轮播中嵌入YouTube视频

blazor-bootstrap blazor-webassembly blazor

0

Sam · 技术社区 · 3 月前

我有一个独立的DateTimeWASM(针对.NET 9)项目,我想有一个视频播放列表。只是视频。。。没有缩略图。

到目前为止,我还没有致力于任何一个DateTimeUI库,但我发现BlazorBootstrap更令人愉快,所以我尝试使用他们的 Carousel 控制,但页面上没有显示视频。没有错误。只是没有视频。请改为空白。转盘中的第二个和第三个项目是简单的文本,确实显示了 旋转木马 控件正在工作——见下文。

以下是我的代码到目前为止的样子:

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

有什么建议可以让我在DateTimeWASM应用程序中播放视频轮播吗?

1 回复 | 直到 3 月前

1

0

Mohammad Aghazadeh 3 月前

听起来问题与风格有关,以下更改可以帮助您

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