Membuat iframe responsif

144

Saya membaca posting stackoverflow ini berjudul "Bisakah Anda membuat iFrame responsif?", Dan salah satu komentar / jawaban membawa saya ke jfiddle ini.

Tetapi ketika saya mencoba menerapkan HTML dan CSS agar sesuai dengan kebutuhan saya, saya tidak memiliki hasil / keberhasilan yang sama. Saya membuat biola JS saya sendiri sehingga saya bisa menunjukkan kepada Anda bagaimana itu tidak bekerja sama untuk saya. Saya yakin itu ada hubungannya dengan jenis iFrame yang saya gunakan (misalnya, gambar produk mungkin perlu responsif juga atau sesuatu?)

Kekhawatiran utama saya adalah bahwa ketika pembaca blog saya mengunjungi blog saya di iPhone mereka, saya tidak ingin semuanya berada pada lebar x (100% untuk semua konten saya) dan kemudian iFrame bertingkah salah dan merupakan satu-satunya elemen yang lebih luas (dan karenanya tetap ada melewati semua konten lainnya - jika itu masuk akal ??)

Lagi pula, apakah ada yang tahu mengapa ini tidak berhasil? Terima kasih.

di sini adalah HTML & CSS dari JSFIDDLE SAYA (jika Anda tidak ingin mengklik tautan):

<div class="wrapper">
  <div class="h_iframe">
    <!-- a transparent image is preferable -->
    <img class="ratio" src="http://www.brightontheday.com/wp-content/uploads/2013/07/placeholder300.png" />
    <iframe frameborder='0' height='465px' width='470px' scrolling='no' src='http://currentlyobsessed.me/api/v1/get_widget?wid=30&blog=Brighton+The+Day&widgetid=38585'
      frameborder="0" allowfullscreen></iframe>
  </div>
</div>

dan di sini adalah CSS yang menyertainya:

.wrapper {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: #ffffff;
}

.h_iframe {
  position: relative;
}

.h_iframe .ratio {
  display: block;
  width: 100%;
  height: auto;
}

.h_iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
css  iframe  responsive-design 
— Brighton
sumber
6
Iframe itu sendiri ('kotak') dapat responsif. Tapi semua yang ada di iframe adalah halaman terpisah, dan karenanya tidak ada dalam domain CSS atau JS Anda.
— DA.
Anda bisa menggunakan easyXDM untuk komunikasi antara halaman di mana i-frame tertanam dan dokumen di server yang ditunjuk iframe.
— john Smith
1
Saya lebih suka css murni: stackoverflow.com/a/26194041/274502
— cregox

Jawaban:

107

Saya mempersembahkan kepada Anda solusi The Incredible Singing Cat =)

.wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

jsFiddle: http://jsfiddle.net/omarjuvera/8zkunqxy/2/
Saat Anda memindahkan bilah jendela, Anda akan melihat iframe untuk mengubah ukuran secara responsif

Atau, Anda juga dapat menggunakan teknik rasio intrinsik - Ini hanya pilihan alternatif dari solusi yang sama di atas (tomat, tomat)

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
} 

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  width: 100%;
  height: 100%;
}
— Omar
sumber
4
Lihat juga artikel ini yang menjelaskan teknik ini secara lebih rinci: smashingmagazine.com/2014/02/...
— Thomas Tempelmann
hanya berfungsi untuk iframe youtube. Lihat ini: jsfiddle.net/1bd8qw76
— csandreas1
2
Teknik ini akan bekerja untuk semua iframe, triknya adalah, konten dalam iframe perlu responsif juga, lebih lanjut tentang ini di sini: benmarshall.me/responsive-iframes
— Ben Marshall
68

Coba gunakan kode ini untuk membuatnya responsif

iframe, object, embed {
    max-width: 100%;
}
— Connor Cushion Mulhall
sumber
37
Anda tidak menyesuaikan ketinggian wadah dengan kode ini.
— Reggie
46

Saya menemukan solusi dari dari Dave Rupert / Chris Coyier. Namun, saya ingin membuat gulir tersedia sehingga saya datang dengan ini:

// HTML

<div class="myIframe"> 
   <iframe> </iframe> 
</div>

// CSS

.myIframe {
     position: relative;
     padding-bottom: 65.25%;
     padding-top: 30px;
     height: 0;
     overflow: auto; 
     -webkit-overflow-scrolling:touch; //<<--- THIS IS THE KEY 
     border: solid black 1px;
} 
.myIframe iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
— Avi
sumber
2
catatan masa depan untuk saya jika padding-bottom konten adalah rasio lebar konten, 800x600 adalah% 75, 800x536 adalah% 67
— nerkn
1
Ini adalah titik awal yang baik untuk membuat iframe gulir untuk sarafi dan semua perangkat. sangat sedih sekalipun ....
— klewis
Ini adalah persis apa yang saya butuhkan untuk memungkinkan iframe untuk menggulir, karena panjangnya lebih dari 5000px. Kode-kode lain memaksa iFrame yang panjang untuk di-overlay konten di bawah ini.
— penmas
untuk 16: 9, padding-bottom harus menjadi 56,25%
— Sergey Sklyar
17

Anda dapat menggunakan trik ini yang disebutkan di situs ini http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php .

Ini sangat berguna dan mudah dimengerti. Yang Anda butuhkan untuk membuat

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Ini biola js Anda yang diedit untuk demonstrasi.

— Pragnesh Chaudhari
sumber
10

lihat solusi ini ... berfungsi untuk saya >> https://jsfiddle.net/y49jpdns/

<html lang="en" class="no-js">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <style>
      html body {width: 100%;height: 100%;padding: 0px;margin: 0px;overflow: hidden;font-family: arial;font-size: 10px;color: #6e6e6e;background-color: #000;} #preview-frame {width: 100%;background-color: #fff;}</style>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script>
         var calcHeight = function() {
           $('#preview-frame').height($(window).height());
         }

         $(document).ready(function() {
           calcHeight();
         }); 

         $(window).resize(function() {
           calcHeight();
         }).load(function() {
           calcHeight();
         });
      </script>
   </head>
   <body>
      <iframe id="preview-frame" src="http://leowebguy.com/" name="preview-frame" frameborder="0" noresize="noresize">
      </iframe>
   </body>
</html>
— Leo Leoncio
sumber
Saya telah memperbarui biola Anda karena ada beberapa bagian yang salah di sana-sini. Itu sama, dan berfungsi sama tetapi tanpa bit membingungkan. jsfiddle.net/6NSX3/263
— Techno.Shaman
IOS tidak menghitung ketinggian dengan benar, perlu bilah navigasi ke akun. Iframe di iOS juga tidak dapat digulir.
— Tine Koloini
6

DA benar. Di biola Anda sendiri, iframe memang responsif. Anda dapat memverifikasi itu di pembakar dengan memeriksa ukuran kotak iframe. Tetapi beberapa elemen di dalam iframe itu tidak responsif, sehingga mereka "menonjol" ketika ukuran jendela kecil. Misalnya, div#products-post-wrapperlebarnya adalah 8800px.

— Philip007
sumber
5

iFrames BISA sepenuhnya responsif sambil menjaga rasio aspek mereka dengan teknik CSS kecil yang disebut Teknik Rasio Intrinsik . Saya menulis posting blog yang membahas pertanyaan ini secara khusus: https://benmarshall.me/responsive-iframes/

Intinya adalah:

.intrinsic-container {
  position: relative;
  height: 0;
  overflow: hidden;
}


/* 16x9 Aspect Ratio */

.intrinsic-container-16x9 {
  padding-bottom: 56.25%;
}


/* 4x3 Aspect Ratio */

.intrinsic-container-4x3 {
  padding-bottom: 75%;
}

.intrinsic-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class="intrinsic-container intrinsic-container-16x9">
  <iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>
Luaskan cuplikan

BOOM, sepenuhnya responsif!

— Ben Marshall
sumber
3

iframes tidak bisa responsif. Anda dapat membuat wadah iframe responsif tetapi bukan konten yang ditampilkannya karena itu adalah laman web yang memiliki tinggi dan lebar pengaturan sendiri.

Contoh biola tautan berfungsi karena menampilkan tautan video youtube tertanam yang tidak memiliki ukuran yang dinyatakan.

— MGDTech
sumber
Ini menyesatkan. Link biola contoh berfungsi juga ketika youtube iframe lebar dan tinggi ditentukan.
— Philip007
14
Saya kecewa ini begitu keras diturunkan. Pesan yang disampaikannya penting; bahwa iFrames berbahaya untuk membuat responsif karena Anda berada di atas kemauan respons sumber. Ya, pengecualian Youtube. Tapi intinya masih berlaku.
— MattWithoos
3

Sederhana, dengan CSS:

iframe{
width: 100%;
max-width: 800px /*this can be anything you wish, to show, as default size*/
}

Harap perhatikan : Tetapi itu tidak akan membuat konten di dalamnya responsif!

EDIT ke-2 :: Ada dua jenis iframe responsif, tergantung pada konten dalamnya:

salah satu yang adalah ketika dalam iframe hanya berisi sebuah video yang atau sebuah gambar atau banyak vertikal diposisikan, untuk yang di atas dua-baris kode CSS hampir cukup sepenuhnya, dan aspek rasio memiliki makna ...

dan yang lainnya adalah:

kontak / formulir pendaftaran jenis konten , di mana bukan rasio aspek yang harus kita pertahankan, tetapi untuk mencegah bilah gulir muncul, dan konten di bawah mengalir wadah. Di ponsel Anda tidak melihat bilah gulir, Anda hanya menggulir sampai Anda melihat konten (iframe). Tentu saja Anda memberikannya setidaknya beberapa jenis height, untuk membuat ketinggian konten beradaptasi dengan ruang vertikal yang terjadi pada layar yang lebih sempit - dengan pertanyaan media, seperti, misalnya:

@media (max-width: 640px){
iframe{
height: 1200px /*whatever you need, to make the scrollbar hide on testing, and the content of the iframe reveal (on mobile/phone or other target devices) */
}
}
@media (max-width: 420px){
iframe{
height: 1600px /*and so on until and as needed */
}
}
— Sándor Zuboly
sumber
1
ini sederhana dan mengagumkan
— vaishali kapadia
ini tidak mempertahankan rasio aspek karena iframe mengubah ukuran, yaitu ketinggian tetap sama tidak peduli berapa lebarnya.
— ryan
@ryan Saya sudah memperbarui jawaban saya. Saya sebagian setuju dengan Anda, btw.
— Sándor Zuboly
2

Saya perhatikan bahwa postingan leowebdev tampaknya berhasil pada ujung saya, namun, itu merobohkan dua elemen situs yang saya coba buat: scrolling dan footer.

Pengguliran saya kembali dengan menambahkan scrolling="yes" kode embed Ke iframe.

Saya tidak yakin apakah footer secara otomatis pingsan karena responsif atau tidak, tetapi mudah-mudahan orang lain tahu jawaban itu.

— Chris Knabenshue
sumber
2

Hapus tinggi dan lebar iframe yang ditentukan dalam piksel dan gunakan persentase

iframe{  max-width: 100%;}
— Jestin
sumber
1
Tapi, itu tidak membuat konten di dalam menjadi responsif.
— Vir
1 
<div class="wrap>
    <iframe src="../path"></iframe>
</div>

.wrap { 
    overflow: auto;
}

iframe, object, embed {
    min-height: 100%;
    min-width: 100%;
    overflow: auto;
}
— Saran
sumber
1

itu memecahkan saya dengan menyesuaikan kode dari @Connor Cushion Mulhall oleh

iframe, object, embed {
  width: 100%;
  display: block !important;
}
Luaskan cuplikan

— Savangchai Saroj
sumber
1
Mulai

Karena kendala keamanan browser, Anda harus memasukkan file Javascript baik di halaman "induk", maupun di halaman yang disematkan melalui iframe ("anak").

Dalam versi saat ini, halaman induk harus menyertakan versi terbaru jQuery. Tidak ada ketergantungan pada jQuery untuk fungsionalitas halaman anak. Dalam versi yang akan datang, kami juga ingin menghapus ketergantungan pada jQuery untuk orang tua.

Catatan: parameter "xdomain" dalam panggilan fungsi makeResponsive () adalah opsional.

Contoh kode <!-- Activate responsiveness in the "child" page --><script src="/js/jquery.responsiveiframe.js"></script><script> var ri = responsiveIframe(); ri.allowResponsiveEmbedding();</script> <!-- Corresponding code in the "parent" page --><script src="/js/jquery.js"></script><script src="/js/jquery.responsiveiframe.js"></script><script> ;(function($){ $(function(){ $('#myIframeID').responsiveIframe({ xdomain: '*'}); }); })(jQuery);</script>
— Ahmed Elcheikh
sumber
0

Dengan markup berikut:

<div class="video"><iframe src="https://www.youtube.com/embed/StTqXEQ2l-Y"></iframe></div>

CSS berikut ini membuat video menjadi penuh dan 16: 9:

.video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
}

.video > .video__iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
  }
}
— Dorian
sumber
0

Saya mencari lebih banyak tentang topik ini dan akhirnya mendapatkan jawaban yang bagus. Anda dapat mencoba seperti ini :

.wrapper {
width: 50%;
}
.container {
height: 0;
width: 100%;
padding-bottom: 50%;
overflow: hidden;
position: relative;
}
.container iframe {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
<div class="wrapper">
  <div class="container">
    <iframe src="there is path of your iframe"></iframe>
   </div>
</div>
Luaskan cuplikan

— Pohon salam
sumber
0

Solusi terbaik untuk membuat "iframe" responsif dan cocok dengan semua layar perangkat, cukup gunakan kode ini (berfungsi baik dengan situs Game): 

iframe::-webkit-scrollbar{display:none}
.iframe{background:#fff;overflow:hidden}
.iframe iframe{width:100%;height:540px;border:0;display:block}
.iframe-content{position:absolute;width:100%;height:540px;overflow:auto;top:0;bottom:0;-webkit-overflow-scrolling:touch}

@media screen and (max-width:992px){.iframe iframe{height:720px}}
@media screen and (max-width:768px){.iframe iframe{height:720px}}
@media screen and (max-width:720px){.iframe iframe{height:720px}}
@media screen and (max-width:479px){.iframe iframe{height:480px}}
@media screen and (max-height:400px){.iframe iframe{height:360px}}

Jika Anda mencari wadah permainan responsif yang cocok dengan semua perangkat, gunakan kode ini yang menggunakan kueri CSS @ media.

— Game Mizo
sumber
Halo, kode html Iframe sederhana hanya terlihat seperti ini:
— Mizo Games
<div class = "iframe"> <iframe src = ""> </iframe> </div>
— Mizo Games
Sebenarnya saya menggunakannya dengan situs web saya: Al3abMizo Games, dan Anda dapat mencobanya dengan memainkan game apa pun di perangkat apa pun ukuran layarnya.
— Mizo Games
0

IFrame yang sepenuhnya responsif untuk situasi di mana rasio aspek tidak diketahui dan konten di iFrame sepenuhnya responsif.

Tidak ada solusi di atas yang berfungsi untuk kebutuhan saya, yaitu membuat iFrame yang sepenuhnya responsif yang memiliki konten dinamis yang sepenuhnya responsif di dalamnya. Mempertahankan segala jenis aspek rasio bukanlah suatu pilihan.

  1. Dapatkan ketinggian bilah navigasi Anda dan konten apa pun DI ATAS atau DI BAWAH iFrame. Dalam kasus saya, saya hanya perlu mengurangi navbar atas dan saya ingin iFrame untuk mengisi hingga ke bagian bawah layar.

Kode: 

function getWindowHeight() {
        console.log('Get Window Height Called')
        var currentWindowHeight = $(window).height()

        var iFrame = document.getElementById("myframe")
        var frameHeight = currentWindowHeight - 95

        iFrame.height = frameHeight; 

    }
//Timeout to prevent function from repeatedly firing
    var doit;
    window.onresize = function(){
      clearTimeout(doit);
      doit = setTimeout(resizedw, 100);
    };

Saya juga membuat batas waktu sehingga pada mengubah ukuran fungsi tidak akan dipanggil jutaan kali.

— JPeG
sumber
0 
For Example :

<div class="intrinsic-container">
  <iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>

CSS 

.intrinsic-container {
  position: relative;
  height: 0;
  overflow: hidden;
}

/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
  padding-bottom: 56.25%;
}

/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
  padding-bottom: 75%;
}

.intrinsic-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}
— KTrivedi
sumber
0

Lihat kode lengkap ini. Anda dapat menggunakan wadah dalam persentase seperti kode di bawah ini:

<html>
<head>
<title>How to make Iframe Responsive</title>
<style>
html,body        {height:100%;}
.wrapper         {width:80%;height:100%;margin:0 auto;background:#CCC}
.h_iframe        {position:relative;}
.h_iframe .ratio {display:block;width:100%;height:auto;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
</style>
</head>
<body>
<div class="wrapper">
<div class="h_iframe">
<img class="ratio" src=""/>
<iframe src="http://www.sanwebcorner.com" frameborder="0" allowfullscreen></iframe>
</div>
<p>Please scale the "result" window to notice the effect.</p>
</div>
</body>
</html>

Lihat Halaman demo ini .

— M. Lak
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.