We Keep Coding

Adding Image to the background youtube video on iframe tag

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

Any ideas on how to make a youtube video play without the automatic fullscreen on facebook?

For instance, if you go ahead and use this code:
<iframe width="100%" height="480" src="https://www.youtube.com/embed/7F8ik6iUzxs?autoplay=1&fs=0 frameborder=0" frameborder="0" allow="autoplay; encrypted-media"></iframe>
And load it up on an IPhone Safari, when you play it, it will automatically go fullscreen.
Any idea on stopping this from happening? I basically want the video to keep playing without automatically enter fullscreen so the rest of the screen is still visible while the video is playing.
Ideally it will also autoplay.

Try adding a responsive div for it:
<div class="video-container"> <iframe width="100%" height="480" src="https://www.youtube.com/embed/7F8ik6iUzxs?autoplay=1&fs=0 frameborder=0" frameborder="0" allow="autoplay; encrypted-media"></iframe> </div>
The CSS:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden; }

<div class="video_frame"><iframe width="100%" height="480"
src="https://www.youtube.com/embed/7F8ik6iUzxs?autoplay=1&fs=0
frameborder=0" frameborder="0" allow="autoplay; encrypted-media"> .
</iframe></div>
css:
.video_frame{
width: 50%;
}
Here is a media query for mobile if you need it.
#media only screen and (max-width: 768px){
.video_frame {
width: 100%;
}
}

Muted youtube with iframe and javascript code not working

Good afternoon,
I have the following code:
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe id="myVideo" width="560" height="349" src="https://www.youtube.com/embed/hygetkMbUto?autoplay=1&loop=1&playlist=hygetkMbUto" frameborder="0" allowfullscreen></iframe>
</div>
<style>
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
And on the header I have the following javascript in order to have the video muted by default:
<script type="text/javascript">
var myVideo = iframe.getElementById('myVideo');
myVideo.mute();
</script>
But it's not working. The video plays with sound.
Does anyone know the reason?
thanks in advance,
sabrina

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
}

How to hide/cover a certain part of an iframe

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