点击红色播放按钮后视频后方渐变背景不显示，如何修复？

问题原因 #

1. 渐变背景无法显示：.containera容器未设置全屏适配属性，无法撑满视口，导致带渐变背景的子元素.containera-inner没有足够的渲染空间，渐变不可见。
2. 紫色背景残留：body元素默认设置了background: #353198的紫色样式，没有被覆盖或移除。

修复方案 #

只需要调整CSS代码即可实现需求：

1. 给.containera容器添加全屏适配样式，确保它能撑满整个屏幕，子元素渐变可以正常渲染：

.containera {
  width: 100%;
  min-height: 100vh;
  display: flex;
}

2. （可选）如果不需要初始状态的紫色背景，直接删除body样式中的background: #353198;属性即可。如果保留该属性也不影响点击播放后的效果，因为撑满全屏的.containera渐变背景会完全覆盖住底层的紫色。

调整完以上代码后，点击播放按钮即可正常显示全屏渐变背景，同时紫色背景会被完全覆盖。

内容的提问来源于stack exchange，提问作者user16721772