Search code examples
csspropertiescss-position

CSS Positioning over a YouTube Video


Good day Please I Need help

I have this css that I have created for preventing someone from clicking the right part of the youtube video I have embeded

The challenge is that I need to create another div that has the same box but want it to be on the same line to the top left of the video

What I have is below. How can I create another div but that would not be under?

<div style="width: 150px; height: 545px; position: absolute; opacity: 0.01; right: 1px; top: 2px; background-color: #000000;"></div>

<div style="width: 150px; height: 545px; position: absolute; opacity: 0.01; right: 1px; top: 2px; background-color: #000000;"></div>

I want the box to be on the same line One to the top left line one to the top right on the same line


Solution

  • Surprisingly after going through some trainings on W3 Schools I came up with this and it solved the problem.

    <div style="width: 150px; height: 545px; position: absolute; z-index: 1; opacity: 0.01; right: 1px; top: 2px; background-color: #000000;"></div>
    
    
    <div style="width: 350px; height: 70px;  position: absolute; opacity: 0.01; left: 1px; top: 2px; background-color: #000000;"></div>
    
    <div style="width: 190px; height: 50px;  position: absolute; opacity: 0.01; left: 0px; bottom: 190px; background-color: #000000;"></div>