Un exemple sera publié ensuite sur une page spécifique mais pas pour Youtube. Je connaissais déjà comment rendre une vidéo Youtube responsive et j'ai enfin trouvé comment le faire pour un iframe ordinaire. Je ne me lancerai pas dans de grandes explications. Il s'agit là de simples modèles à adapter. Allez faire aussi un tour sur la page Responsive Iframe Generator (attention la copie du CSS ne fonctionne pas chez moi) pour voir les "aspects ratio"
Voici le code CSS pour un aspect ratio de 1:1 soit un carré. Pour le ratio, c'est padding-top qui change. En orange, ce qui peut être personnalisé. À mettre entre <head> et </head>.
Ici, le code html à placer où on veut:
Seule l'URL est à changer
<style>
.iframe-container {
overflow: hidden;
padding-top: 100%;
position: relative;
}
.iframe-container iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
</style>
<div class="iframe-container"><iframe loading="lazy" src="https://embed.windy.com/embed2.html?lat=18.05&lon=-63.097&detailLat=18.05&detailLon=-63.083&zoom=9&level=surface&overlay=rain&product=ecmwf&menu=&message=true&marker=true&calendar=now&pressure=true&type=map&location=coordinates&detail=&metricWind=km%2Fh&metricTemp=%C2%B0C&radarRange=-1"></iframe></div>
Ci-dessous, modèle pour une vidéo Youtube. Même principe mais bien plus compliqué. J'ai d'ailleurs l'intention d'adapter si possible le précédent code aux vidéos. Ici, le CSS est à mettre entre <head> et </head>. 56,25% correspond au ratio 16:9 et cette fois il est dans padding-bottom. Ne me demandez pas pourquoi! Mais c'est la même utilité que précédemment.
Mettez ce script où vous voulez (plutôt au début ou à la fin du <body> si vous utilisez CKEditor qui a tendance à casser les scripts dans sa version gratuite. Dans ce cas, vous pourrez facilement ne pas copier cette partie et ne pas l'éditer en WYSIWYG). Pour ma part, je n'ai rien changé dans le script. Le "background" est seulement la flèche de "play".
<style>
.youtube-player {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
margin: 5px;
}
.youtube-player iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background: transparent;
}
.youtube-player img {
object-fit: cover;
display: block;
left: 0;
bottom: 0;
margin: auto;
max-width: 100%;
width: 100%;
position: absolute;
right: 0;
top: 0;
border: none;
height: auto;
cursor: pointer;
-webkit-transition: 0.4s all;
-moz-transition: 0.4s all;
transition: 0.4s all;
}
.youtube-player img:hover {
-webkit-filter: brightness(75%);
}
.youtube-player .play {
height: 72px;
width: 72px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -36px;
position: absolute;
background: url('//i.imgur.com/TxzC70f.png') no-repeat;
cursor: pointer;
}
</style>
<script>
/*
* Light YouTube Embeds by @labnol
* Credit: https://www.labnol.org/
*/
function labnolIframe(div) {
var iframe = document.createElement('iframe');
iframe.setAttribute('src', 'https://www.youtube.com/embed/' + div.dataset.id + '?autoplay=1&rel=0');
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('allowfullscreen', '1');
iframe.setAttribute('allow', 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture');
div.parentNode.replaceChild(iframe, div);
}
function initYouTubeVideos() {
var playerElements = document.getElementsByClassName('youtube-player');
for (var n = 0; n < playerElements.length; n++) {
var videoId = playerElements[n].dataset.id;
var div = document.createElement('div');
div.setAttribute('data-id', videoId);
var thumbNode = document.createElement('img');
thumbNode.src = '//i.ytimg.com/vi/ID/hqdefault.jpg'.replace('ID', videoId);
div.appendChild(thumbNode);
var playButton = document.createElement('div');
playButton.setAttribute('class', 'play');
div.appendChild(playButton);
div.onclick = function () {
labnolIframe(this);
};
playerElements[n].appendChild(div);
}
}
document.addEventListener('DOMContentLoaded', initYouTubeVideos);
</script>
Et enfin, le lecteur minimaliste avec l'ID de la vidéo Youtube à changer bien sûr.
<div class="container">
<div class="item vert">
<div class="youtube-player" data-id="6NXrFApPurE"></div>
</div>
</div>
* Light YouTube Embeds by @labnol
* Credit: https://www.labnol.org/
Aucun commentaire:
Enregistrer un commentaire