Si quieres alinearlo, puedes usar flexbox, como te recomendaron arriba y para separar las cajas usar margin o padding y tienes varios métodos para que la imagen no se distorsione.
Te dejo 3 ejemplos, revisa todos, pero sobretodo el ultimo que es lo que creo que quieres:
Objet-fit: COVER
.caja {
width: 100%;
text-align: center;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin-bottom: 1em;
}
.foto, .video{
display:inline-flex;
vertical-align: top;
}
.foto{
width: 30%;
}
.video {
width: 70%;
}
.foto img {
width: 100%;
height: auto;
max-height: 393px;
object-fit: cover;
}
<div class="caja">
<div class="foto">
<img src="http://picsum.photos/900/450">
</div>
<div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/TxAUdSYo1Y4" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
</div>
</div>
<div class="caja">
<div class="foto">
<img src="http://picsum.photos/901/451">
</div>
<div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/wl3_hAFs1gM?rel=0" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
</div>
</div>
<div class="caja">
<div class="foto">
<img src="http://picsum.photos/902/452">
</div>
<div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/SR1YY-olieU?rel=0" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
Object-fit: contain
.caja {
width: 100%;
text-align: center;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
padding-bottom: 1em;
}
.foto, .video{
display:inline-flex;
vertical-align: top;
}
.foto{
width: 30%;
}
.video {
width: 70%;
}
.foto img {
width: 100%;
height: auto;
max-height: 393px;
object-fit: contain;
}
<div class="caja">
<div class="foto">
<img src="http://picsum.photos/900/450">
</div>
<div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/TxAUdSYo1Y4" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
</div>
</div>
<div class="caja">
<div class="foto">
<img src="http://picsum.photos/901/451">
</div>
<div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/wl3_hAFs1gM?rel=0" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
</div>
</div>
<div class="caja">
<div class="foto">
<img src="http://picsum.photos/902/452">
</div>
<div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/SR1YY-olieU?rel=0" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
Que sea responsive
Depende del resultado que quieres obtener, ahora para el responsive, no se si la mejor manera sea conservar la imagen al lado en moviles por que como ves o se corta o se achica demasiado, lo mejor es usar un media querie que en escritorio se comporte como necesites y en móviles la imagen ocupe todo el ancho o solo la mitad.
.caja {
width: 100%;
margin: auto;
text-align: center;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
padding-bottom: 1em;
}
.foto, .video{
display:inline-flex;
vertical-align: top;
width: 100%;
max-width: 700px;
}
.foto img {
width: 100%;
height: auto;
max-height: 393px;
object-fit: cover;
}
@media (min-width: 960px){
.foto{
width: 30%;
max-width: initial;
}
.video {
width: 70%;
}
}
<div class="caja">
<div class="foto">
<img src="http://picsum.photos/900/450">
</div>
<div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/TxAUdSYo1Y4" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
</div>
</div>
<div class="caja">
<div class="foto">
<img src="http://picsum.photos/901/451">
</div>
<div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/wl3_hAFs1gM?rel=0" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
</div>
</div>
<div class="caja">
<div class="foto">
<img src="http://picsum.photos/902/452">
</div>
<div class="video">
<iframe width="700" height="393" src="https://www.youtube.com/embed/SR1YY-olieU?rel=0" src="#" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
Igual no se si es el mismo efecto responsive que quieres, coloca tu comentario para verificar como sería la mejor opción.