Смена основного изобраения товара на IFrame

[ViacheslavA 1]

Добрый вечер.

Если будет минутка времени, то прошу помочь с возникшей проблемой.

Полвечера не пойму что делаю не так.

Задача - у поставщика есть Iframe, в котором он по артикулу показывает 3Д товара. Решил добавить кнопку для включения режима 3Д.

Хочу сделать показ не во всплывающем окне, а вместо основной картинки.

У конкурента увидел, как он накрывает основную картинку Iframe-ом. Но у него все на битриксе и стили совсем другие - например https://industriation.ru/156663/

 

Я не спец по стилям и так и не сообразил, как настроить элемент, что бы он в том же li как и основная картинка появился - почему так, то сохранятся все размеры как у картинки.

Работаю на базовом шаблоне.

 

Попробовал добавить такой скрипт  в \catalog\view\theme\default\template\product\product.tpl повесил его на кнопку

  $(document).ready(function(){
	  
  	$('body').on('click', 'img.3d_view', function(){
		var test_3d=$('.thumbnails li:eq(0)');
		if(!test_3d.find('iframe').length){
			//var html = '<div class="thumbnail" id="thumb_3d" style="position:absolute; display: block; width:100%; heigth:100%;">';
				var html = '<iframe style="width:100%; heigth:100%;" src="https://www.festo.com/eap/ru_ru/DKI3CAD2Preview/start.do?PartNo=153016#previewfs">';
				html += '</iframe>';
				
			test_3d.append(html);
		}else{
		test_3d.find('iframe').remove();
		}
	});
});

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

Чую одним местом что у донора виноват в успехе кусок стиля

.thumbnails li:first-child {
    display: block;
    position: relative;
}

Получается, что после добавления фрейма меняется стиль картинки, но пробую и не становится на свое место....

 

Задача не сложная, но мозга совсем не хватает.