Seeking assistance for a unique positioning challenge I am facing.
I have a Video that needs to be placed on the home page with a TV-like image "frame" around it, and they should scale together.
https://i.sstatic.net/2pLhi.png
What I've attempted is removing the middle border, keeping the TV outline, creating a container, stretching the image to fill the entire container. However, I'm struggling to center the video because the container is smaller than the image.
HTML
<?php
get_header();
?>
<section class="Home-main">
<div class="row">
<div class="sidebar-space col-xs-0 col-sm-3 col-lg-2">
</div>
<div class="content col-xs-12 col-sm-9 col-lg-10">
<div class="container">
<div class="home-video">
<img class="h-video" src="<?php echo home_url();?>/wp-content/uploads/2020/06/Tv-Frame.png">
<iframe src="https://player.vimeo.com/video/427699658" width="640" height="480" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</section>
<?php
get_footer();
?>
CSS
.Home-main{
background-image: url("http://localhost/Gummy-Vital/wp-content/uploads/2020/06/Home-back.png");
height:4500px;
background-repeat: no-repeat;
}
.home-video{
position:relative;
margin-top:40px;
}
.h-video{
width:100%;
height:auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Note: The exaggerated height is just to ensure the background aligns correctly.
I intend to add a border around the video for an inner border effect.