Comment créer un iframe redimensionable en largeur et en hauteur pour faire du responsive design ?

Définir une division d'une hauteur de 0px et d'un padding-bottom du pourcentage souhaité.

Mettre l'iframe, la video embeded etc. dedans avec la position absolute, le top et le left à 0, la hauteur et la largeur à 100%.



<div class="diaporama" style="position:relative;width:100%;height:0px;padding-bottom:40%;">       <iframe src="surcouf.html" frameborder="0" scrolling="no" style="position:absolute; left:0px; top:0px; width:100%; height:100%"></iframe>

 </div>

Commentaires

Enregistrer un commentaire

Posts les plus consultés de ce blog

Scénario d'une gestion durable de l'humanité imaginée par un informaticien

Image
Je me suis aidé de bard.google.com pour établir ce scénario des plus probables. Année 2020 L'humanité est confrontée à une crise globale. La population mondiale a atteint 8,5 milliards d'habitants, et les ressources naturelles sont en train de s'épuiser. Les changements climatiques provoqués ont entraîné des catastrophes naturelles de plus en plus fréquentes et destructrices. Une nouvelle élite mondiale se prend pour le Messie annoncé et décide de prendre les choses en main. Elle lance un programme de gestion durable de l'humanité, visant à réduire la population mondiale à 500 millions d'habitants. Le premier objectif du programme est de collecter le code génétique de chaque personne. Cela est fait au moyen de tests antigéniques obligatoires, qui sont effectués à intervalles réguliers. Les données génétiques collectées sont utilisées pour identifier les individus les plus vulnérables, tels que les personnes âgées, les personnes malades, les personnes en surpoids. Le...
Lire la suite

Comment éviter que deux divisions se chevauchent ?

Image
Quand on utilise l'attribut float:left; dans une division ( <div> ), il arrive souvent qu'on ne puisse pas dimensionner la hauteur du conteneur.  Cela produit ceci : La division Voir tous les événements chevauche la division précédente qui contient des divisions avec l'attribut float:left; Pour obtenir un écart entre les deux divisions, il est nécessaire d'ajouter dans la première division l'attribut overflow:auto; Exemple de code HTML : <div style="position:relative;...; overflow:auto; ">        <div style="float:left; ..."></div>        <div style="float:left; ..."></div>        <div style="float:left; ..."></div>        ... </div> <div style="position:relative;...">     Voir tous les événements </div>
Lire la suite

Le contrat Pfizer passé avec l'Europe le 20/11/2020

Image
Page 48 et 49 – Article 1 Clause 4 :  L’État membre participant reconnaît que le vaccin et les matériaux liés au vaccin , ainsi que leurs composants et matériaux constitutifs, sont en cours de développement rapide en raison des circonstances d’urgence de la pandémie de COVID-19 et continueront d’être étudiés après la fourniture du vaccin aux États membres participants dans le cadre du CAA. L’État membre participant reconnaît en outre que les effets à long terme et l’efficacité du vaccin ne sont pas connus à l’heure actuelle et qu’il peut y avoir des effets indésirables du vaccin qui ne sont pas connus à l’heure actuelle. En outre, dans la mesure applicable, l’État membre participant reconnaît que le vaccin ne sera pas sérialisé (sans n° de série).
Lire la suite