Question

我想显示来自其中一个网站的视频，因为我无法使用它，但我使用iframe和一些如何仅显示iframe的视频部分。

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

jsFiddle

上的示例

我不知道如何使用jQuery来显示只有嵌入了视频的DIV包装

<div class="floatFirst omega_t3">或仅css，如果我们可以

Answer 1

我的解决方案适用于我的要求，而不是提供ConnorRoberts，因为在他的解决方案社交媒体插件浮动中，当我用if div包装iframe时，这不是我想要的，如示例所示隐藏所有内容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

您可以轻松地执行此操作，条件是您显示的页面（来自其他域）与CORS headers一起发送，允许您的来源（或任何来源）。

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();

有关如何设置CORS标头的详细信息，请参阅http://enable-cors.org/

Answer 3

虽然这不是一个理想的解决方案......

我有一个游戏并提出了这个问题：http://jsfiddle.net/XrdRH/它仍然需要一点点改进才能使距离正确，除了改变它所需要的一切之外，所有这些都在改变偏移。

top:-303px; left: 10px;

使用的整个代码是（需要提交）：

<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;">

你应该寻找一个更好的解决方案，但这只是工作：）

我可以使用css或jQuery强制iframe显示页面的某些部分

3 个答案: