iframe 全屏按钮未在 Chrome 中显示

编程问答 2022-05-12

问题描述

我的网页有一些显示 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 (将#修改为@）

fullscreenfullscreengoogle-chromeiframeiframetypescripttypescripttypescriptvimeo