如何从<iframe>中删除youtube嵌入视频的黑色边框？

Question

我尝试使用＆lt; iframe /＆gt; 使youtube嵌入视频的左右边框消失，但仍然没有，并尝试使用 loop = 1 并且也不循环。

＆＃xA;＆＃xA;

我不介意视频本身离开屏幕，最好包含在没有边框的屏幕内。我只是希望视觉本身完全覆盖屏幕并且左右两侧的黑色边框消失，并且还将它放在循环上。

＆＃xA;＆＃xA;

＆＃xA;＆＃xA;

我可能做错了什么？

＆＃xA;＆＃xA;

这里是代码：

＆＃xA;＆＃xA;

＆＃xD;＆＃xA;

＆＃xD;＆＃xA;

  .nonClickingContainer {＆＃xD;＆＃xA;宽度：100vw;＆＃xD;＆＃xA;身高：100vh;＆＃xD;＆＃xA; position：relative;＆＃xD;＆＃xA;}＆＃xD;＆＃xA; .catVideo {＆＃xD;＆＃xA;高度：计算（100vh + 50px）;＆＃xD;＆＃xA; width：100％;＆＃xD;＆＃xA;}  

＆＃xD;＆＃xA;

 ＆lt; div className =“nonClickingContainer”＆gt;＆＃xD;＆＃xA; ＆lt; iframe className =“catVideo”width =“100％”height =“100％”src =“https://www.youtube.com/embed/7WZPysRdP8A?autoplay=1&autohide=0&controls=0&modestbranding = 1＆amp; rel = 0＆amp; showinfo = 0＆amp; disablekb = 1＆amp; loop = 1“frameborder =”0“scrolling =”no“allowfullscreen＆gt;＆lt; / iframe＆gt;＆＃xD;＆＃xA;＆lt; / div＆gt; < /代码> 

＆＃的xD;＆＃XA;

＆＃的xD;＆＃XA;

＆＃的xD;＆＃XA;

＆＃XA;

Answer 1

请点击此链接How to make a YouTube embedded video a full page width one?。如果您不明白只需在iframe中添加ID，就像视频一样

<div className="nonClickingContainer">
   <iframe id="video" className="catVideo" width="100%" height="100%" src="https://www.youtube.com/embed/7WZPysRdP8A?autoplay=1&autohide=0&controls=0&modestbranding=1&rel=0&showinfo=0&disablekb=1&loop=1" frameborder="0" scrolling="no" allowfullscreen></iframe>
</div>

然后将此JavaScript代码添加到您的JS文件

$(function(){
$('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });

$(window).resize(function(){
$('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });
  });
});

并从css文件中删除这些css代码

.nonClickingContainer {
  width: 100vw;
  height: 100vh;
  position: relative;
}
.catVideo {
  height: calc(100vh + 50px);
  width: 100%;
 }

抱歉，我忘了告诉你，如果你还没有调用它，你需要调用jQuery。