Hello! I have a website at bit.ly/1EfgOsM and I am trying to align the video box with a YouTube video next to an image box. The width of the image box is set to 40%, so I want the video box to also be responsive with a width of 40%. The video box is in a separate class from the image box because the image box has its own AJAX function.
How can I align the video properly?
Please take a look at the image here:
I have tried using the following code, but the height of the video ends up being too big:
<div class="video44"><iframe width="560" height="315" src="https://www.youtube.com/embed/mZXkhXcZ3AQ?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe> </div>
.video44 {
width: 40%;
font-family: 'Raleway_Medium';
font-size: 15px;
text-align: center;
text-transform: uppercase;
}
.video44 {
height: auto;
overflow:hidden;
padding-bottom:56.25%;
position:relative;
}
.video44 iframe{
left:0;
top:0;
height: 100%;
width:100%;
position:absolute;
}