How to hide/cover a certain part of an iframe - javascript

I have this iframe:
<iframe width='828'
height='465'
frameborder='0'
allowfullscreen
src='https://www.firedrive.com/embed/B027D40BFCD0BBC0'>
</iframe>
and would like to cover/remove the Firedrive logo in the corner to make it unclickable. How can I do this. I've been searching on the web for hours but nothing seems to work for me.
Jsfiddle: http://jsfiddle.net/aZ5p6/
Beware: THE IFRAME CONTAINS ADS. The logo is at the top right corner of the iframe.
I'm a newbie at html, please do not simply tell me how to solve it, spoon feed me the code.

You must add a container/wrapper around the iframe. Try this:
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

Checkout
Your Log blocked by a Div with Id Blocker .Give the background color that you want or if you want any other logo give it as the background image of this 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>

100% Work
iFrame has some limitation but there is another way is .load()
for external URL you need to add CSS also if you want the same look.
HTML :
<div id="urlDetails"></div>
JS:
$('#urlDetails').load('http://www.example.com/page.php #content');
Note: All data available in id="content" will appear here you can also use with a class name.
CSS (optional)
<link rel="stylesheet" href="http://example.com/css/style.cssenter code here">

Related

How do I mask an iframe(embedded with yt) with a div to allow my onclick event to trigger instead of it playing?

I have three iframes with yt videos embedded in it. What I want is to be able to disable the controls of yt since once i click the video it starts playing and doesnt fire my onclick event that resizes the iframe's width and height.
This are the things that i think may help:
the use of z-index
masking the iframe with a div
position absolute
(which sadly did not work for me)
<div class="main">
<div class="card1" onclick="changeSizeOfVid1()">
<iframe id="video1" width="320px" height="240px" src="https://www.youtube.com/embed/bWPMSSsVdPk">
</iframe>
</div>
<div class="card2">
<iframe id="video2" onclick="changeSizeOfVid2()" width="320px" height="240px" src="https://www.youtube.com/embed/0afZj1G0BIE">
</iframe>
</div>
<div class="card3">
<iframe id="video3" onclick="changeSizeOfVid3()" width="320px" height="240px" src="https://www.youtube.com/embed/Ukg_U3CnJWI">
</iframe>
</div>
my jsfiddle
With the idea of using z-index, you were on the right track. However, you did not implement this in your fiddle. Here is an example of a possible implementation of such an overlay
HTML:
<div class="card">
<div class="overlay">
IM THE OVERLAY
</div>
<iframe class="video" width="320px" height="240px" src="https://www.youtube.com/embed/bWPMSSsVdPk">
</iframe>
</div>
CSS:
.card {
display: inline-block;
position: relative;
width:320px;
height:240px;
}
.overlay {
position: absolute;
top:0;
left:0;
z-index:1;
width:100%;
height:100%;
background:red;
opacity: .8
}
.video{
position: absolute;
top:0;
left:0;
z-index:0;
}
JS:
element = document.querySelector('.overlay');
element.addEventListener('click', function(){
alert("overlay clicked");
})
Fiddle: https://jsfiddle.net/2en6L2ak/3/

Youtube video div overlay glitch

I'm trying to cover a video with a div so it's not visible. Then when you hover over the div it's heigth shrinks to let the video controls visible.
I don't know why I get this weird glitch: https://i.gyazo.com/aff58e50903009f7515a9cbd9b045f91.mp4
This is the slice with the video and overlay in question:
<div class="ytsound-cover" ng-class="{'ytsound-cover-lower': hover, 'ytsound-cover': !hover}" ng-mouseenter="hover = true" ng-mouseleave="hover = false" id="cover">
</div>
<div id="ytsound">
<iframe width="300" height="250" src="//www.youtube.com/embed/TbsBEb1ZxWA?autoplay=1&loop=1&playlist=TbsBEb1ZxWA&showinfo=0&start=65" frameborder="0" allowfullscreen></iframe>
</div>
Style here:
.ytsound-cover{
background: #fff;
height: 250px;
position: absolute;
width: 301px;
}
.ytsound-cover-lower {
background: #fff;
height: 205px;
position: absolute;
width: 301px;
}
Whole thing is loaded inside an ng-view.
But anyway, here is all the source code, I'm hosting it on github:
https://github.com/Vacanor/gifsound
I'd love some pointing towards why that is happening.
PD: I don't know if it does have any effect but I use flexbox
try wrapping these divs by another div just like below-
<div class="main-cover">
<div class="ytsound-cover" id="cover"></div>
<div id="ytsound">
<iframe width="300" height="250" src="//www.youtube.com/embed/TbsBEb1ZxWA?autoplay=1&loop=1&playlist=TbsBEb1ZxWA&showinfo=0&start=65" frameborder="0" allowfullscreen></iframe>
</div>
</div>
make style like-
.main-cover{
position:relative;
height:250px;
width:301px;
}
.ytsound-cover{
background: #fff;
height: 250px;
position: absolute;
width: 301px;
}
.main-cover:hover .ytsound-cover{
height:205px
}

CSS:hover:after overlay breaks jquery on click for me

I have a jQuery lightbox setup with a number of 300x300px images that on click open the lightbox. I would like to be able to overlay an semi-opaque background and text information with the video titles on the CSS :hover:after. The overlay works correctly and the lightbox works without the overlay code in place. But as soon as I combine the two the hover works but blocks the on click. Here is my HTML code:
<div class="screenShot" id="video1">
<a href="#"data-videoid="21183190" videosite="vimeo">
<img src="http://www.gorillacreativemedia.com/wp-content/themes/gorillashifter/img.php?mw=300&mh=300&src=library/images/noimage.png" />
</a>
</div>
And here is the CSS:
.screenShot{
display:inline-block;
position:relative;
margin:20px;
}
.ScreenShot img {
max-width: 100%;
height: auto;
}
#video1:hover:after {
content: '\A';
position: absolute;
width:300px;
height:300px;
background:rgba(255,0,0,0.6);
top:0;
left:0;
padding:100px auto;
text-align:center;
vertical-align:middle;
}
I don't know if I should be trying to trigger this off of a Javascript function instead or if I'm missing something simple with the formatting.
Use z-index:
CSS:
#video1:hover:after {
content:'\A';
position: absolute;
width:300px;
height:300px;
background:rgba(255, 0, 0, 0.6);
top:0;
left:0;
padding:100px auto;
text-align:center;
vertical-align:middle;
z-index:-1 //Generally lower than the element's z-index
}
Demo: http://jsfiddle.net/GCu2D/843/
I figured it out. The tag has to wrap around the element that you're putting the hover event on. I changed the HTML to this:
<div class="screenShot">
<a href="#" data-videoid="21183190" data-videosite="vimeo">
<div id="video1">
<img src="http://www.gorillacreativemedia.com/wp-content/themes/gorillashifter/img.php?mw=300&mh=300&src=library/images/noimage.png" />
</div>
</a>
</div>
Kept the CSS the same and it appears to work as intended now.

Css Rescaling Fixed Banner

So quick question, I haven't been able to find the correct phrasing perhaps in google but I'm attempting to make a fixed banner will scale when the page is resized. I've found that using a percentage width works for at least the large container, however my banner container within the main container will not rescale into that adequately (The banner is extending longer than the main container).
CSS:
.contMain {
width:80%;
position: top
padding-top: 0;
border-top: 0;
margin: 0 auto;
background-color: #F1EDCC;
}
.contMain-banner {
position:fixed;
width: inherit;
background: #87AADF;
}
HTML:
<div class="contMain">
<div class="contMain-banner">
<h1 class="contMain-title">Some Title</h1>
{{> MeteorTemplate}}
</div>
</div>
The only higher level css is a .body tag in css for a background color. I am using MeteorJS for this. Cheers
Try this - codepen here
css
body {
height:100%;
width:100%;
}
.contMain {
height:150px;
width:80%;
padding:0;
margin: 0 auto;
background-color: #333333;
}
.contMain-banner {
position:fixed;
width: inherit;
height:auto;
background: #d7d7d7;
}
span {
color:#fff;
position:absolute;
top:125px;
}
HTML
<body>
<div class="contMain">
<div class="contMain-banner">
<h1 class="contMain-title">Main Content Banner</h1>
{{> MeteorTemplate}}
</div>
<span>This is the main container</span>
</div>
</body>

I want to overlay image on top of other existing image using javascript

I have user photo which I want to put on top other image, so as to make that image complete.
Here is my code
<div id="containerDiv">
<figure>
<img id="someImage" src="../images/someImage.gif" >
</figure>
<div id="buttonDiv">
<button>Done</button>
</div>
</div>
I have other image which I am taking from cache and putting in some
<img src=cachedImage />
I want to style it so that I can put the cached image on top of someImage also The entire containerDiv should be responsive to the browser window. So, I want to get the css part of this. I tries using relative and absolute positioning
<style>
#containerDiv{
position:relative; width:100%; height:300px;
}
#someImage{
position:absolute; top:10px; left:100px;
}
#buttonDiv{
position:absolute; top:100px; left:200px;
}
</style>
I want the button to be responsive with the someImage too. But it does not move along with the image. Also the cached image should be in sync with someImage. Thanks in advance.
i am not aware with your code but try this hope this helps you
<div class="div on which you want to show overlay">
<div class="overlay overlay-div">
<center>
<div class="overlay-content"><p>your overlay content,img goes here</p>
</div>
</center>
</div>
</div>
and css for overlay is :
.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1050;
background-color: rgba(0,0,0,0.5); /*dim the background*/
}
you can show overlay div on mouse hover/in/out events.

Categories