-1

We're trying to embed this Reddit page (https://www.reddit.com/live/veh2e41lp0he) in an iFrame, but it appears blank. We thought it would be neat to layer real-time chat on top of the page, but it seems impossible without resorting to an extension or forcing users to download something.

Here's the HTTP JSFiddle: http://jsfiddle.net/sjvcs165/, which works with CNN.com and ESPN.com.

<iframe src="https://www.reddit.com/"></iframe>

html {
    height: 100%;
}
body { 
    height: 100%; 
    min-height: 100%;
    position: relative;
}

iframe { width: 100%; height: 100%; min-height: 100%; }

Here's the HTTPS JSFiddle: https://jsfiddle.net/zzkpdxue/, which contains the same code, but originates from an HTTPS page, which we thought would solve the problem. It also fails to show HTTPS content.

Is it not possible to show HTTPS content in an iFrame? Aren't ads, presented as secure content, sometimes served on HTTPS pages through iFrames?

Crashalot
  • 33,605
  • 61
  • 269
  • 439
  • 3
    Open up your browser console (F12) in Chrome, your fiddle states "Refused to display 'https://www.youtube.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'" - Youtube chose to block iFrames – temporalslide Aug 13 '15 at 05:25
  • @TemporalSlide Lol exactly what I was going to say. I was just typing it in a answer haha – Jacques Koekemoer Aug 13 '15 at 05:26
  • Duplicate of http://stackoverflow.com/questions/18136803/ajax-and-youtube-x-frame-options-to-sameorigin, which has a possible workaround (not certain if will fit you, but looks likely). Looks like same solution from this other duplicate http://stackoverflow.com/questions/9934944/embedding-youtube-video-refused-to-display-document-because-display-forbidden-b. So many others out there too, even a cursory search would have shown this for you. I also found this of interest if you want to understand a little more bout why: http://coderissues.com/questions/20346576/same-origin-policy – Daniel Brose Aug 13 '15 at 05:30
  • @DanielBrose Thanks. Actually the question is unclear, as our primary use case was Reddit -- not YouTube. We did search online first but around concepts related to "https content iframe." Were it only YouTube, you're probably right, we would have found it. Wish people would not be so quick to downvote without asking more questions (not saying you did). – Crashalot Aug 13 '15 at 05:39
  • @Crashalot - the reason you got downvotes would have been FAR more related to how you never mentioned the error msg. That more than anything else indicates lack of proper research effort or troubleshooting before jumping here to ask question, as that is such a rudimentary step (that is repeated in 90% of all JS answers or comments) and would lead to a very easy answer search. This prob could have been avoided if (as noted in http://stackoverflow.com/help/how-to-ask) you included links to posts that DIDNT help you, to show research effort. This question is repeated so many times you need it. – Daniel Brose Aug 14 '15 at 01:10

2 Answers2

2

If you open your developer tools (Chrome or FF) you will see there is an error:

Console from Google Chrome

Refused to display 'https://www.youtube.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'. Refused to display 'https://www.reddit.com/live/veh2e41lp0he' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'

If you look further into this here on stackoverflow you would see that there is a header that prevents the iframe from loading.

Essentially the other website (Youtube or Reddit) prevents you from loading content from any other source other than their own website. To get the content you would need to look at fetching it with an AJAX or CURL request.

Community
  • 1
  • 1
Jacques Koekemoer
  • 1,378
  • 5
  • 25
  • 50
0

Error : 

Refused to display 'https://www.reddit.com/live/veh2e41lp0he' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

Reson : reddit.com http headder 'X-Frame-Options' does not allow to load into Iframe from other origin.

Solutions : use CURL to read the page

venkat7668
  • 2,657
  • 1
  • 22
  • 26