Je veux mettre un iframe sur ma page avec un autre div au-dessus de l'iframe pour revenir à une page spécifique. Cependant, je ne peux pas sembler obtenir l'iframe pour aller plein écran (hauteur: 100% et largeur: 100%). Y a-t-il un travail autour d'un travail pour obtenir l'iframe en plein écran?
J'ai déjà essayé de régler la hauteur à la hauteur de la fenêtre en utilisant JQuery, cependant, sa ne fonctionne pas. P>
<style>
iframe {
height:100%;
width:100%;
}
.goback {
width:100%;
background-color:transparent;
transition:.5s;
position: absolute;
z-index:3;
}
.goback img {
padding:5px;
}
.goback:hover {
background-color:white;
}
</style>
<body>
<div class="goback">
<img src="../../assets/goback.png" alt="goback" height="50px" width="50px" />
</div>
<iframe src="https://music.youtube.com/"></iframe>
</body>
3 Réponses :
Utilisez la largeur et la hauteur ViewPort au lieu de pourcentages
iframe {
height:100vh;
width:100vw;
}
Vous devez modifier votre CSS (définir la marge du corps sur 0, position Iframe absolue et régler la bordure à 0)
Exemple: P>
body {
margin: 0;
}
iframe {
position: absolute;
top: 0;
left: 0;
height:100%;
width:100%;
border: 0;
}
Utilisez le
width:100%; height:100vh;