Can i force iframe to show certain part of page using css or jQuery

Problem

I want to show video from one of the website since i cant consume it i though of using iframe and some how show only video part of the iframe.

<iframe src="http://www.dmi.ae/live.asp?lang=en&ChannelID=2" width="650" height="476" >
</iframe>

Example on jsFiddle

I am not sure how i can using jQuery to show only DIV wrapper which has video embedded

<div class="floatFirst omega_t3"> or just by css if we can

Problem courtesy of: Learning

Solution

My solution works suites my requirement as compared to one provided ConnorRoberts as in his solution social media plugin floats which is not what i want when i wrap iframe with div as shown in example it hides everything example

#my-div
{
    width    : 650px;
    height   : 500px;
    overflow : hidden;
    position : relative;
}

#my-iframe
{
    position : absolute;
    top      : -320px;
    left     : -150px;
    width    : 1280px;
    height   : 1200px;
}

<div id="my-div">
<iframe id="my-iframe"  src="http://www.dmi.ae/live.asp?lang=en&ChannelID=2" width="650" height="476" scrolling="no"  >
</iframe>

</div>
Solution courtesy of: Learning

Discussion

You can easily do it on the condition that the page (coming from another domain) you show is sent with CORS headers allowing your origin (or any origin).

var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
    if (httpRequest.readyState === 4) {
        if (httpRequest.status === 200) {
            $content = $(httpRequest.responseText);
            $(iframeId).html($content.find('.floatFirst.omega_t3'));
        }
    }
}
httpRequest.open('GET', 'http://www.dmi.ae/live.asp?lang=en&ChannelID=2');
httpRequest.send();

For more information about how to set CORS headers, see http://enable-cors.org/

Discussion courtesy of: Denys Séguret

While it's not an ideal solution...

I had a play and came up with this: http://jsfiddle.net/XrdRH/ it still needs a little refinement with getting the distances right and all but all that's required to change it is changing the offsets. 

top:-303px; left: 10px;

The entire code used is (required to submit):

<iframe src="http://www.dmi.ae/live.asp?lang=en&ChannelID=2" width="680" height="855" style="position:absolute; top:-303px; left: 10px; overflow: hidden;">

You should look to find a nicer solution, but this does just about work :)

Discussion courtesy of: ConnorRoberts

This recipe can be found in it's original form on Stack Over Flow.