如何解决iframe 全屏按钮未在 Chrome 中显示
我的网页有一些显示 Vimeo 视频的 iframe,出于某种原因,在 Chrome 中全屏按钮不可见,我检查过在 Safari 和 Firefox 中全屏按钮是可见的并且它工作正常。这是我正在使用的父级和 iframe 的代码。
other-courses.tsx
<div className={`m-other-videos-videos`}>
{referenciaPlantillaContenido.map((val,index) => (
<>
{val.descripcion && val.descripcion.json && (
<>
<div key={index} className="full-screen-video">
<div>
<CardOtherSec
Date={documentToReactComponents(val.descripcion.json)}
urlVideo={val.redireccionBoton}
Title={val.tituloBanner}
/>
</div>
</div>
</>
)}
</>
))}
</div>
这里是 Iframe 代码
videoSec.tsx
<iframe
src={urlVideo}
className="video a-cardOtherSec eferer"
allow={"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; mozAllowFullScreen; webkitAllowFullscreen;"}
allowFullScreen={true}
frameBorder="0"
></iframe>
由于某种原因在 Chrome 中它不起作用,我一直在寻找,我发现在 Chrome 中正在创建一个名为 .no-full-screen-support 的类,我不明白它为什么要创建它,因为在 Firefox 和 Safari 中他们没有创建那个类。 Here's how it looks in Chrome and the video without the fullscreen Button 和 here's how it looks in Mozilla Firefox。
所以我想知道为什么要创建 .no-full-screen-support 以及如何修复以便全屏按钮在 Chrome 中可用
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。