Внедрение iframe внутри изображения

Question

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

Answer 1

Заверните его в DIV, использовать фоновое изображение

.frame { 
 
    width:400px; 
 
    height: 400px; 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
    background-image: url(http://want2scrap.com/store/images/large/Cat%20Frame%20DC_LRG.jpg) 
 
} 
 

 
.frame iframe { 
 
    position: relative; 
 
    top: 165px; 
 
    left: 100px; 
 
    width: 250px; 
 
    }

<div class="frame"><iframe src="http://example.com" /></div>

Answer 2

Вам нужно будет использовать стиль для наложения iframe поверх изображения. См. Это answer для более подробной информации.