Comment rendre une balise Iframe html responsive
Comment rendre balise Iframe html responsive
Etape 1 :
Coller ce code dans la balise <head> </head> de votre site web. Voici le code:
<style>
.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%;
}
</style>
le <body> </body> de la page doit avoir l'iframe ainsi que le lien du site web.
.WRAPPER est le nom du DIV ou se trouve l' Iframe
Voice un code complet :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SbtHaiti</title>
<meta name="description" content="sbt Haiti">
<meta name="keywords" content="sbt Haiti">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,700|Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="css/styles-merged.css">
<link rel="stylesheet" href="css/style.min.css">
<link rel="stylesheet" href="css/custom.css">
<!--[if lt IE 9]>
<script src="js/vendor/html5shiv.min.js"></script>
<script src="js/vendor/respond.min.js"></script>
<![endif]-->
<style>
.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%;
}
</style>
</head>
<body>
<div class="wrapper">
<center> <iframe src="http://www.ddroid509ht.com/" ></iframe> </center>
</div>
</body>
</html>
Remplacer http://www.ddroid509ht.com/ par votre site web
Commentaires
Enregistrer un commentaire