2

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?

Improve this question

1 Answer 1

Reset to default
3

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

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

YouTube HTTP Response Headers

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.

Improve this answer
1
  • Thank you for your reply. I am not familiar enough with http responses to really understand the whole thing but the thing is, we did use the code provided as their embed options (for both sites) and it worked for me but not for them.
    – curious
    Commented Dec 10, 2013 at 3:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.