首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何将全屏视频背景添加到角度

如何将全屏视频背景添加到角度
EN

Stack Overflow用户
提问于 2019-05-25 07:33:37
回答 1查看 7.7K关注 0票数 0

我目前正在做一个角度项目。在这个项目中,我想为所有组件添加一个视频作为它的背景。我该怎么做呢。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-05-25 07:43:11

将以下代码添加到app.component.html

代码语言:javascript
复制
<video autoplay muted loop id="myVideo">
  <source src="path_to_video" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

app.component.css添加以下代码

代码语言:javascript
复制
 /* Style the video: 100% width and height to cover the entire window */
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

/* Add some content at the bottom of the video/page */
.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

/* Style the button used to pause/play the video */
#myBtn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
}

#myBtn:hover {
  background: #ddd;
  color: black;
} 

要了解更多细节,请访问此链接

希望这对你有用。

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56302774

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档