In my product landing page, I have two problems here .
The first one is : in my HTML element <video>
I want to post my video there ,and I try to make a video host and I copy the link there but not work. the video not display.
The second one is : when you scroll down the page my video can’t hide behind the header. I try so many times but still don’t know what I should use in my CSS.
if anyone can help then I really appriciate.
Not sure why you have the embed.js as the source for the video but if you want an imgur embed it would look like this (random cat video).
<blockquote class="imgur-embed-pub" lang="en" data-id="a/DiE9MpI">
<a href="//imgur.com/a/DiE9MpI">Predator reflexes??</a>
</blockquote>
<script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>
But you can’t use that has you can’t (afaik) set the id on the video that gets created.
If you go to the imgur page with the video and right-click it and select Inspect you can get the source, for example for the above embed it is https://i.imgur.com/4zGftR3.mp4
which you can then use. You can link to the video page if you need help with it.
<video controls style="max-width: 480px;">
<source type="video/mp4" src="https://i.imgur.com/4zGftR3.mp4">
</video>
For the header set a z-index on it.
header {
position: fixed;
width: 100%;
top: 0;
left: 0;
background-color: #faebd7;
font-family: 'Exo 2', sans-serif;
padding: 0;
z-index: 10;
}
wow ,thank you so much , now the second problem is solved already. the first one I need thinking about it now .
Replace what you have with this instead.
<video id="video" controls>
<source type="video/mp4" src="https://i.imgur.com/2K8hhea.mp4">
</video>
Avoid using inline styles, target the element using a selector and write the CSS in the selector.
So awesome. now is working. thank you so much. very appreciate!!!