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
}
Related
<div style="position:absolute; top:50px; left:0px">
<iframe style="border: none;" src="./RedMan2.html" width="1350" height="900"></iframe>
</div>
How do you automatically resize an iframe to fit the device screen? I just started learning HTML and JS and CSS, so if I did not leave enough code just tell me. I'm only 11. Thanks.
In most modern browsers you can use vw and vh units which are equal to 1% of screen width and height respectively:
<div style="position:absolute; top:50px; left:0px">
<iframe style="border: none; width: 100vw; height: 100vh;" src="./RedMan2.html" width="1350" height="900"></iframe>
</div>
If you are targeting old browsers, you can set width: 100%; height: 100%; for the iframe and its parent div:
<div style="position:absolute; top:50px; left:0px; width: 100%; height: 100%;">
<iframe style="border: none; width: 100%; height: 100%;" src="./RedMan2.html" width="1350" height="900"></iframe>
</div>
Using
height: 100vh; width: 100vw;
CodePen
More info can be found here: Full-screen iframe with a height of 100% :)
After applying this code I am getting video over Image but I want to add Image over you-tube with play button on it
In this code when I increase the padding of the div which is (padding: 18px) now video get shorter and background Image comes on back
but I want Video should play on clicking Image , video should play on the full container
<div id="background-video" style="background: url(images/fight-c-diff.png) no-repeat; padding: 18px; width: 600px; height: 300px;">
<iframe width="295" height="222" src="https://www.youtube.com/embed/UBCQmEHctCw" frameborder="0" allowfullscreen>
</iframe>
</div>
Please Try This:-
<div id="background-video" style="background: url(https://cdn.pixabay.com/photo/2018/07/20/22/43/adler-3551609_960_720.jpg) top center no-repeat; background-size: cover;">
<iframe width="295" height="222" src="https://www.youtube.com/embed/UBCQmEHctCw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>
<a class="play-btn" href="#">Play Button</a>
</div>
Js
jQuery('.play-btn').click(function(e) {
e.preventDefault();
jQuery(this).hide();
jQuery('#background-video').find('iframe').show();
jQuery('#background-video').find('iframe')[0].src += "?autoplay=1";
});
CSS
#background-video { width: 640px; height: 360px; position: relative; }
#background-video iframe { width: 100%; height: 100%; display: none; }
#background-video .play-btn { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; font-size: 0px; line-height: 0px; background: url(http://www.legacycitychurch.com/media/cover_art/Play%20Button%20Overlay/playbutton.png) center center no-repeat; background-size: 120px auto; }
Videojs should solve your problem in the easiest way possible :)
Take a look! https://docs.videojs.com/posterimage
Could somebody please take a look at this livelink of my web page? I have a caption in the top right hand side of each of the divs in my layout div, however I have one horizontal box (the first one) where the caption extends to the bottom of the div instead of only having a height of 20px. I have been searching through this code but I can not see why.
Thanks in advance
HTML
<div class="col">
<div class="trigger vertical img1">
<div tabindex="0" class="maincontent">
<div class="slider static">
<div class="just_text">
<div class="caption-box">Caption</div>
<img src="slide1.png" height="400" width="200" />
</div>
<div class="just_text">
<div class="caption-box">Caption</div>
<img src="slide2.png" height="400" width="200" /></div>
<div class="just_text">
<div class="caption-box">Caption</div>
<img src="slide3.png" height="400" width="200" /></div>
<div class="just_text">
<div class="caption-box">Caption</div>
<img src="slide4.png" height="400" width="200" /></div>
</div>
</div>
</div>
</div>
CSS
.caption-box {
position: absolute;
right: 0;
height: 20px;
width:100px;
background-color: red;
color: #fff;
z-index: 999;
}
Add !important to your height, this will fix it...
.caption-box {
position: absolute;
right: 0;
height: 20px!important;
width:100px;
background-color: red;
color: #fff;
z-index: 999;
}
You've a
.trigger.vertical * {
height: 400px;
}
in your CSS, that force the heigh of the caption to 400px.
It happens only to the first caption because only the first caption is a child of a .trigger.vertical
Inspecting the element with Chrome shows that the height of 20px is overridden by this CSS class:
.trigger.vertical * {
height: 400px;
}
I noticed that there are quite a few differences in the layout between IE11 and Chrome 41.0.2272.118 so there are likely other issues with the layout.
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">
I have a youtube video on my page and I want it to be bordered with an image. It fits perfectly, but I can't play it.
Here is the link:
< iframe style="margin-top: 0px; margin-left: 85px;"width="431" height="270" src="http://www.youtube.com/embed/RHaIQWOsxaA?autoplay=0&cc_load_policy=1" frameborder="0" allowfullscreen></iframe>
And the video looks like this?
http://kepfeltoltes.hu/131024/354340238asd_www.kepfeltoltes.hu_.jpg
Can somebody help me with this.
Thank you so much!
***Edit**
Thank you, I tired the z-index, now it shows the video, but I stil can't play it. :S
***Edit**
It's perfect, thank you so much!
here's a very basic Solution
HTML:
<div class="video-container">
<iframe class="Video" src="http://www.youtube.com/embed/RHaIQWOsxaA?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
CSS:
.video-container {
background: url(http://images.amazon.com/images/G/01/electronics/apple/apple-mbp2011-13-frontface_osx-lg.jpg) no-repeat;
height: 590px;
width: 1000px;
}
.Video{
position:absolute;
width: 654px;
height: 411px;
left: 177px;
top: 69px;
}
And Here's the Demo
Assign a z-index of 2 to the Iframe and a z-index of 1 to the image through CSS.