Question

我有这个iframe：

<iframe width='828' 
        height='465' 
        frameborder='0' 
        allowfullscreen 
        src='https://www.firedrive.com/embed/B027D40BFCD0BBC0'>
</iframe>

并希望覆盖/删除角落中的Firedrive徽标，使其无法点击。我怎样才能做到这一点。我一直在网上搜索几个小时但似乎没有什么对我有用。

Jsfiddle：http://jsfiddle.net/aZ5p6/

注意：IFRAME包含广告。徽标位于iframe的右上角。

我是html的新手，请不要简单地告诉我如何解决它，用勺子喂我代码。

Answer 1

您必须在iframe周围添加容器/包装器。试试这个：

<强> CSS

.wrapper{
    position:relative;
    z-index: 1;
    display: inline-block;
}

.hidelogo{
    position: absolute;
    width: 150px;
    height: 40px;
    background: #222;
    right: 0px;
    bottom: 6px;
    z-index:999;
    display: block;
    color: #fff;
}

<强> HTML

<div class="wrapper">
    <div class="hidelogo"></div>
    <iframe width='828' height='465' frameborder='0' allowfullscreen src='https://www.firedrive.com/embed/B027D40BFCD0BBC0'></iframe>
</div>

<强> DEMO HERE

Answer 2

Checkout

您的日志被带有Id阻止程序的Div阻止。给您想要的背景颜色，或者如果您想要任何其他徽标，请将其作为此div的背景图像

CSS

   #Blocker{

    position:absolute;
    z-index:10;
    right:10px;
    bottom:5px;
    height:15px;
    width:100px;
    background-color:orange;
}
#frame{

    height:100%;
    width:100%;
     position:absolute;
}
#Wrapper{
    height:100%;
    width:auto;
    border:solid red 2px;
}

HTML

<div id="Wrapper">


    <iframe id="frame" width='828' height='465' frameborder='0' allowfullscreen src='https://www.firedrive.com/embed/B027D40BFCD0BBC0'>


</iframe>
    <div id="Blocker">
        Logo Blocked 
    </div> 
</div>

Answer 3

100％的工作
iFrame有一些限制，但还有另一种方法是 .load（）
对于外部URL，如果您希望外观相同，还需要添加 CSS 。

HTML：

<div id="urlDetails"></div>

JS：

$('#urlDetails').load('http://www.example.com/page.php #content');

注意：在 id =“ content” 中可用的所有数据都会显示在此处，您也可以将其与类名一起使用。

CSS（可选）

<link rel="stylesheet" href="http://example.com/css/style.css在此处输入代码">

如何隐藏/覆盖iframe的某个部分

3 个答案:

CSS

HTML