CODEWITHSUNDEEP
cssiframeclip-path
Anna_B
Anna_B

Reputation: 900

How can I preserve the paddings of the embedded website?

This question is based on this.

I realized that the website of the iframe gets cut off on the left side. There should be more margin-left. Furthermore it would be cool to center the plate in the middle of the .media-item.

Does anyone know how to do that?

scaleIframe();

window.onresize = scaleIframe;

function scaleIframe() {
  var scale = window.innerWidth * 0.50 / 1440;
  document.getElementById('myIframe').style.transform = "scale(" + scale + ")";
}
.media_item {
  width: 70vw;
  height: 40vw;
  background-color: rgb(220, 220, 220);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.iframe-container {
  width: 50vw;
  height: calc(50vw / 1.8);
  transform: perspective(100vw) rotateY(30deg);
  clip-path: polygon(0 5px, 10px 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 5px));
}

.iframe-container:before {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0 auto 0 0;
  width: 10px;
  background: #0005
}

#myIframe {
  transform-origin: 0 0;
  border: none;
}
<div class="media_item">
  <div class="iframe-container">
    <iframe id="myIframe" src="https://en.wikipedia.org/wiki/CSS" width="1440" height="800"></iframe>
  </div>
</div>

Upvotes: 0

Views: 23

Answers (1)

Temani Afif
Temani Afif

Reputation: 273869

Use border instead of the pseudo element then consider a translation in the transform to rectify the alignment.

scaleIframe();

window.onresize = scaleIframe;

function scaleIframe() {
  var scale = window.innerWidth * 0.50 / 1440;
  document.getElementById('myIframe').style.transform = "scale(" + scale + ")";
}
.media_item {
  width: 70vw;
  height: 40vw;
  background-color: rgb(220, 220, 220);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.iframe-container {
  width: 50vw;
  height: calc(50vw / 1.8);
  transform: translate(5vw) perspective(100vw) rotateY(30deg);
  clip-path: polygon(0 5px, 10px 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 5px));
  border-left: 10px solid #0005;
  text-align: center;
}

#myIframe {
  transform-origin: 0 0;
  border: none;
}
<div class="media_item">
  <div class="iframe-container">
    <iframe id="myIframe" src="https://en.wikipedia.org/wiki/CSS" width="1440" height="800"></iframe>
  </div>
</div>

Upvotes: 1

Related Questions