Mobirise-Tutorials.com

Code: Alles auswählen

<section data-bs-version="5.1" class="pdf-viewer-block">
  <mbr-parameters>
    <input type="text" title="PDF-Datei (Pfad oder URL)" name="pdfFile" value="https://www.niederastroth.de/agb.pdf" placeholder="/assets/docs/datei.pdf oder https://...">
    <input type="range" inline title="Höhe (px)" name="pdfHeight" min="300" max="1200" step="50" value="800">
  </mbr-parameters>

  <div class="container">
    <div class="pdf-wrapper" mbr-style="{'height': pdfHeight + 'px'}">
      <iframe mbr-style="{'height': pdfHeight + 'px'}" src="https://docs.google.com/gview?url={{location.origin + pdfFile}}&embedded=true" class="pdf-frame" frameborder="0" allowfullscreen></iframe>
    </div>

    <div class="text-center mt-3">
      <a class="btn btn-primary" href="{{pdfFile}}" target="_blank">PDF öffnen / herunterladen</a>
    </div>
  </div>
</section>

Code: Alles auswählen

.pdf-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: (3 / 4);
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: #fff;
}
.pdf-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
@media (max-width: 768px) {
  .pdf-wrapper {
    aspect-ratio: (4 / 5);
  }
}