在响应式html5中将视频嵌入到图像中

Question

我试图在视频中嵌入视频，但挑战在于页面是否响应。视频在全屏幕上显示，但是当分辨率发生变化时，视频会自动移出。

所以我希望视频在各种尺寸的图像框内。我应该使用@media还是有另一种方式？

<div class="col-md-4">
    <img class="img-responsive" style="width:344px;height:780px"
        src="Images/mywork-images/cicis/cicis-mobile.jpg">
    <div class="player">
        <iframe src="https://player.vimeo.com/video/139805324"
            width="290" height="290" frameborder="0"
            webkitallowfullscreen mozallowfullscreen
            allowfullscreen></iframe>
    </div> 
</div>

.player{
    position: relative;
    height: 0;
    bottom: 565px;
    left: 21.3%; /* 110px */
}