Have two problems here

HTML-CSS
#1

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.

#2

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;
}
1 Like
#3

wow ,thank you so much , now the second problem is solved already. the first one I need thinking about it now . :grin:

#4

This is the link where I got from Imgur: The magic of the Internet
but still can’t display.

#5

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.

1 Like
#6

So awesome. now is working. thank you so much. very appreciate!!! :+1: :+1: :+1:

1 Like