CODEWITHSUNDEEP
htmliframe
Oded Harth
Oded Harth

Reputation: 4406

How to display part of a webpage using iframes?

How can I make an iframe that will display only part of the iframes' webpage?

Lets take youtube for example. How can an iframe display only the youtube video player?

Thanks,

Oded

Upvotes: 0

Views: 1320

Answers (2)

Melody Horn
Melody Horn

Reputation: 768

If you're looking specifically for YouTube, you could just fetch the embed code dynamically for the video you're after and display it that way. If you're looking for a general solution, you're in for a long session with the HTML for the target site. If you figure out that your content is all within a <div id='content-you-want'>, for example, then you could do something like:

$.get('proxy.php?url=' + urlEncode("http://my-target-url.com"), function(result_data) {
  $("#target-element").html($(result_data).find("#content-you-want").html());
}

if you're using jQuery. But there's still a load of work to be done if the stuff you want isn't conveniently all wrapped up in a div with an id. And you'll need proxy.php to beat the same origin policy.

Upvotes: 1

Pekka
Pekka

Reputation: 449783

This is impossible: An iframe will always show the full document. The Same Origin Policy will prevent you from taking a part out of it.

The only workaround would be to fetch Youtube's HTML data from your server (using a server side language), then translate all relative references contained in the page, and output it as if it were a page on your server. You could then isolate specific elements from it because you're in the context of your own domain. This is called setting up a server side proxy.

However, this is a highly imperfect and tough process, and almost (sometimes completely) impossible to get right without breaking stuff, especially with JavaScript and Video. Plus it's most likely illegal, at least in the case of YouTube.

Upvotes: 2

Related Questions