Mobile app version of vmapp.org
Login or Join
Ann8826881

: Videos from Youtube/Vimeo not displaying in iframes I was giving a webinar about HTML today in Brackets. When showing how to use iframes, all my students managed to insert Google Maps using

@Ann8826881

Posted in: #Filtering #Http #Iframe #Localhost

I was giving a webinar about HTML today in Brackets. When showing how to use iframes, all my students managed to insert Google Maps using iframes but no one was able to make the YouTube and Vimeo iframes work (we used the code provided by the services themselves in the embed sections). It worked for me, no hassle (in Brackets, just like them). From what I was told (we had to do without screen sharing this time unfortunately), Live Preview (Brackets browser) displayed the area but with a sad face icon instead of video. I thought it might be due to the Brackets browser but I had a participant working in NotePad++ who was saving to desktop and opening in a regular browser, it didn't work for them either.

My students were mostly teachers, probably assisting the webinar while in their institutions. I raised the hypothesis that possibly videos were filtered in their workplace but someone said they can normally use YouTube (directly that is). I checked the code for one of the iframes and everything seemed fine.

One of my participants eventually got a workaround, by adding https to the URL like so:

<iframe src="https://player.vimeo.com/video/80476161" ...


This is the trick my students use to bypass the school filters to access Facebook. Could that confirm my doubts about iframes getting blocked by something in the environment of my participants? What do you think is going wrong here?

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Ann8826881

1 Comments

Sorted by latest first Latest Oldest Best

 

@Berumen354

This is because of the x-frame-options:SAMEORIGIN response header.

If you analyse a HTTP response from YouTube you will see the following:



As you can see there is a response header, 2nd from bottom, that sets x-frame-origin to SAMEORIGIN. This basically prevents you from framing content from YouTube in an iframe on your own site. The idea is to prevent you from framing all of their content in your own site to try and impersonate them or clickjack their traffic. You can read more in the official RFC here.

YouTube and Vimeo do have embed options that will allow you to embed videos in your own site properly. These can generally be found under the 'share' option on the appropriate video page.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme