Динамическое встраивание изображений и видео в iframe

Я использую Laravel PHP для извлечения изображений из базы данных и отображения их в приложении для блогов, которое я создаю. Я решил использовать тег iframe, чтобы я мог извлекать и отображать как изображения, так и видео в блоге. Однако проблема, с которой я столкнулась, связана с CSS, когда я пытаюсь создать " iframe ", чтобы настроить его размер на разные размеры изображений и видео и сохранить их соотношение сторон одновременно.

Прямо сейчас маленькие изображения отображаются хорошо, но если я использую изображение большого размера, все с шириной более 800 пикселей, изображение не будет сохранять его соотношение сторон и/или быть обрезанным.

Просмотр (Laravel PHP Blade File):

<div class="blog_img_container">
  <iframe class="blog_img_container_image" scrolling="no"
      src='{{asset("uploads/photos/" . $funnyblocks_blog->blog_photo_path ) }}' 
      onload='javascript:resizeIframeHeight(this);
      javascript:resizeIframeWidth(this);'  ></iframe><br>
      <p> {{ $funnyblocks_blog->blog_content}} </p>
</div>

CSS:

.blog_img_container {
    float:left;
    position:relative;
    width:60%;
}

.blog_img_container_image {
    display:block;
    max-width:100%; 
    max-height:400px; 
    margin-top:20px;
    overflow:auto;
}

.blog_img_container iframe {
    border:none; 
}

Я также попытался использовать некоторый Javascript, который я вызывал в ' onload ' в элементе iframe, но он все еще не дает желаемого результата.

Javascript:

function resizeIframeHeight(obj) {
        obj.style.height= obj.contentWindow.document.body.scrollHeight + 'px';
   }
   function resizeIframeWidth(obj) {
        obj.style.width= obj.contentWindow.document.body.scrollWidth + 'px';            
   }

Я не знаю, правильно ли это подход, который я должен использовать для динамического извлечения и отображения как изображений, так и видео в одном элементе (в этом случае тег iframe). Любая помощь очень ценится!