Как вы добавляете ссылку и текст поверх фонового видео и делаете их отзывчивыми с помощью html5?

Question

Попытка создать страницу для моего проекта с использованием видео в качестве фона, но, похоже, не может помещать ссылку и текст поверх видео ... Я был в состоянии сделать только один или другой. Любая помощь приветствуется! заранее спасибо!

Answer 1

Вот пример, то "тестирование" h1 является ссылка на google.com

https://codepen.io/carlos27/pen/rrpAWz

HTMTL

<!-- Content --> 
<article> 
    <h1><a href="http://www.google.ca" target="_blank">TESTING</a><br /><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></h1> 

</article> 
<!-- Video is muted & autoplays, placed after major DOM elements for performance & has an image fallback --> 
<video autoplay loop id="video-background" muted> 
    <source src="https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&profile_id=119&oauth2_token_id=57447761" type="video/mp4"> 
</video> 

CSS

body { 
    margin: 0; 
    padding: 0; 
/* Background fallback in case of IE8 & down, or in case video doens't load, such as with slower connections */ 
    background: #333; 
    background-attachment: fixed; 
    background-size: cover; 
} 

a:link{ 
    color:white; 
    text-decoration: none; 
} 

/* The only rule that matters */ 
#video-background { 
/* making the video fullscreen */ 
    position: fixed; 
    right: 0; 
    bottom: 0; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -100; 
} 

/* These just style the content */ 
article { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: 10px; 
} 

h1 { 
    position: absolute; 
    top: 60%; 
    width: 100%; 
    font-size: 36px; 
    letter-spacing: 3px; 
    color: #fff; 
    font-family: Oswald, sans-serif; 
    text-align: center; 
} 

h1 span { 
    font-family: sans-serif; 
    letter-spacing: 0; 
    font-weight: 300; 
    font-size: 16px; 
    line-height: 24px; 
} 

h1 span a { 
    color: #fff; 
}