kein JavaScript, nur CSS

[Kurt]

Das div um den iframe hat eine feste Breite und Höhe, dieses wird dann mit CSS-transform auf die halbe Größe skaliert.

Es verkleinert um die Häfte, aber ich verstehe nicht um die Hälfte von was.

.device-tablet-portrait {
    height: 972px;
    left: 5%;
    top: 15%;
    width: 1000px;

	background:#ff0000;
}

In diesem Fall wäre es doch um die Hälfte von width: 1000px;, aber das stimmt irgendwie nicht.

https://jsfiddle.net/yz1pnq7z/