如何在React中的视频顶部添加链接

Question

所以我在我的react页面上添加了一个带有一些自定义css的视频。我想在视频顶部添加一个链接，但没有添加。当我重新加载页面时，我可以在一瞬间看到链接。这是我的密码。

反应代码

import tsquare from '../mediafiles/tsquare.mp4'
import "./TimesSquare.css";
import { Link } from 'react-router-dom';
function TimesSquare(){
return(
<>
<div class="video-container">
<video autoPlay muted loop id="myVideo">
<source  src={tsquare} type="video/mp4"/> 

</video>
<Link className="explore" to="/home">Tour</Link>
</div>


</>
)
}
export default TimesSquare;

Css代码

.video-container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%; 
overflow: hidden;
}

.video-container video {
/* Make video to at least 100% wide and tall */
min-width: 100%; 
min-height: 100%; 

/* Setting width & height to auto prevents the browser from stretching or squishing the video */
width: auto;
height: auto;

/* Center the video */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

Answer 1

尝试在链接中添加z-index属性或在视频之前添加<link>。

.explore {
z-index: 2;
}

.video-container {
position: absolute;
top: 0;
bottom: 0;

/* if you want to center the container, you can do this */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.video-container video {
border: 1px solid purple;
}

a {
position: absolute;
left: 12px;
top: 10px;
}

<div class="video-container">
<a className="explore" href="#">Tour</a>
<video>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
</div>

还要记住，当您定位某个"绝对"时，它将设置为父引用容器。您可以将position:relative添加到要用作引用的容器中。