Can I get an iframe to display a specific part of the page using css or jQuery

Question

I want to show a video from one of the sites, since I can’t use it, although I use an iframe, and some use how to show only part of the iframe video.

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

JsFiddle example

I'm not sure how I can use jQuery to display only a DIV wrapper that has a built-in video

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

Answer 1

My solution works with my requirements compared to the one provided by ConnorRoberts , as in its plugins for social media plugins, which are not what I want when I wrap the iframe with a div , as shown in the example, which hides the whole 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> 

Answer 2

You can easily do this provided that the page (appearing from another domain) that you display is sent with CORS headers , allowing you to happen (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 on how to set CORS headers, see http://enable-cors.org/

Answer 3

While this is not an ideal solution ...

I had a game, and I came up with this: http://jsfiddle.net/XrdRH/ she still needs to improve a bit by getting the correct distances and all but all that needs to be changed is changing the offsets.

 top:-303px; left: 10px; 

All code used (required for sending):

 <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 have to search to find a more pleasant solution, but it only does the job :)