0

I have two 50% width divs. One is simple image and another one is YouTube embed.

What I want to achieve is to have the same height for both elements (image and video). I need that this would work the same on responsive.

I was trying to use http://embedresponsively.com/ css for video embed, but can't understand how to make it work correctly.

Here is what i want to do:

enter image description here

This is my jsfiddle:

<div class="content">
<div class="left">
    <img src="http://placehold.it/756x560/2cb7c0/ffffff">
  </div>
  <div class="right">
    <div class='embed-container'><iframe src='https://www.youtube.com/embed/C7dPqrmDWxs' frameborder='0' allowfullscreen></iframe></div>
  </div>
</div>

https://jsfiddle.net/ujddekdf/

MIC
  • 135
  • 2
  • 13

1 Answers1

0

You won't be able to resize the youtube video, as the proportions of it are set by the provider. The easiest solution is to resize your image to have the same proportion as the video. Then it also works well on the responsive:

 <img src="http://placehold.it/756x424/2cb7c0/ffffff">

https://jsfiddle.net/ujddekdf/1/

Adam
  • 3,415
  • 4
  • 30
  • 49
  • Thanks for answer, yeah.. but it is possible to set custom height/width to video without any problem, however i'm not sure how to make it work in responsive. – MIC Jan 10 '16 at 13:08
  • As you can see on the fiddle - you will need to make sure that both - image and the video have the same proportions of edges. Or simply - they will have the same height and width. Then they will expand the same on the mobile. Does this answer your question? If no, how would you like them to behave on the mobile? – Adam Jan 10 '16 at 13:15
  • Yes, but in your example you are making the IMAGE the same as video and i would like to have VIDEO in size like image. So not sure how to achieve this. If i'll add fixed height/width to iframe it will be not responsive. I have changed width/height in css for iframe to same sizes as image here - https://jsfiddle.net/ujddekdf/2/ , but again can't figure out how to make it responsive :/ – MIC Jan 10 '16 at 13:32
  • Dude, it is physically impossible to put two objects of different sizes/proportions next to each other with the same size. They just won't match. You can make image smaller (cropped), or make video bigger, but video bigger will have to be stretched, and that does't make any sense You can expand the youtube video – Adam Jan 10 '16 at 15:38
  • Hm, but in my last jsfiddle update both image and video has the same aspect ratio/size. I have updated it to https://jsfiddle.net/ujddekdf/3/ by removing some css parameter, so if you make window bigger you will see that both image and video size is the same, however it doesn't work in responsive. – MIC Jan 10 '16 at 15:42