How do I show a logo in a video while it's fullscreen?

user_15037947 0
Viewed 413

I wrote a small code that plays a video with a logo. The logo should appear on the video and it works just fine until the video goes full-screen -- the logo doesn't show up.

Here's my code

.video {
  position: relative;
  display: inline-block;
  width: 600px;
  max-width: 60%;
  background-color: #000;
}

.video video {
  width: 100%;
  object-fit: contain;
  object-position: 50% 50%;
}

.video .watermark {
  position: absolute;
  width: 15%;
  height: 15%;
  top: 5px;
  left: 5px;
  z-index: 999;
}

.video .watermark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 0 0;
}

#goFullScreen {
  background: #fff;
  font-size: 15px;
  padding: 10px;
  display: inline;
  cursor: pointer;
}

.fullscreen #goFullScreen {
  display: none;
}

.video .exit {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 13px;
  color: #fff;
  display: none;
}

.fullscreen .exit {
  display: block
}
<div class="video">
  <div class="watermark">
    <img draggable="false" src="https://www.jing.fm/clipimg/full/82-824068_aperture-science-logo-png.png">
  </div>
  <video id="video" controlsList="nodownload nocaptions" controls="" preload="metadata">
        <source src="https://thepaciellogroup.github.io/AT-browser-tests/video/ElephantsDream.mp4" type="video/mp4">
    </video>
</div>

How can I make the logo appear even the video goes full-screen?

css html
2 Answers

When the Video player goes full screen the HTML/Java has less control of this new object.

To save all this trouble with HTML/Java I would just 'bake' your logo into the video itself. That way it cannot be removed either be editing browser code. You can do this with many free video editors. I would recommend checking out Davinci Resolve

Davinci is way more powerful than you need but it is free for commercial use and may open up some other doors if you have some more content ideas.

Look up some tutorials on watermarks in Davinci. There are a bunch of ways to do it. If you choose to go this route you will have to re-render your video with the water mark in it.

Good Luck!

user_116597720
user_150320970
Related