Les vidéos de Youtube / Vimeo ne s'affichent pas dans les iframes
Je donnais un webinaire sur HTML aujourd’hui dans Brackets. En montrant comment utiliser les iframes, tous mes étudiants ont réussi à insérer Google Maps à l'aide d'iframes, mais personne n'a réussi à faire fonctionner les iframes YouTube et Vimeo (nous avons utilisé le code fourni par les services eux-mêmes dans les sections d'intégration). Cela a fonctionné pour moi, pas de soucis (dans Brackets, juste comme eux). D'après ce qu'on m'a dit (malheureusement, nous n'avons pas eu le partage d'écran cette fois-ci), Live Preview (navigateur Brackets) affichait la zone, mais avec une icône de visage triste à la place de la vidéo. Je pensais que cela était peut-être dû au navigateur Brackets, mais un participant de NotePad ++ qui enregistrait sur le bureau et ouvrait dans un navigateur standard ne fonctionnait pas pour eux non plus.
Mes étudiants étaient pour la plupart des enseignants, assistant probablement au webinaire dans leurs institutions. J'ai évoqué l'hypothèse selon laquelle des vidéos pourraient éventuellement être filtrées sur leur lieu de travail, mais quelqu'un a dit qu'il pouvait normalement utiliser YouTube (c'est-à-dire directement). J'ai vérifié le code pour l'un des iframes et tout semblait bien se passer.
Un de mes participants a finalement eu une solution de contournement en ajoutant https à l'URL comme suit:
<iframe src="https://player.vimeo.com/video/80476161" ...
C'est le truc que mes élèves utilisent pour contourner les filtres de l'école afin d'accéder à Facebook. Est-ce que cela pourrait confirmer mes doutes sur le blocage des iframes par quelque chose dans l'environnement de mes participants? Que penses-tu qui va mal ici?
Cela est dû à l'en-tête de réponse x-frame-options:SAMEORIGIN.
Si vous analysez une réponse HTTP de YouTube, vous constaterez ce qui suit:
Comme vous pouvez le constater, il existe un en-tête de réponse, le 2e en partant du bas, qui définit x-frame-Origin sur SAMEORIGIN. Cela vous empêche essentiellement de cadrer le contenu de YouTube dans une iframe sur votre propre site. L'idée est de vous empêcher de cadrer tout leur contenu sur votre propre site pour tenter de les imiter ou de cliquer leur trafic. Vous pouvez en lire plus dans le RFC officiel ici .
YouTube et Vimeo ont des options d'intégration qui vous permettront d'intégrer correctement des vidéos sur votre propre site. Ceux-ci peuvent généralement être trouvés sous l'option 'partager' sur la page vidéo appropriée.