I want to put the video from YouTube in the background of the site but the title of video is not hiding. I don't know why, because I put in the URL "controls=0". Here's the code and screen.
screen
Code:
<div class="video-background">
<iframe frameborder="0" height="100%" width="100%" src="https://www.youtube.com/embed/NwbEe6-EYFA?&theme=dark&autoplay=1&keyboard=1&autohide=1&modestbranding=1&fs=0&showinfo=0&rel=0&start=14&controls=0" allowfullscreen></iframe>
</div>
And the CSS:
.video-background {
position: fixed;
z-index: -99;
width: 100%;
height: 100%;
Related
I'm working on the contact page WordPress I am using Google Maps iframe embed so at WPBakery builder plugin I found Raw HTML widget which I set all iframe Google Maps.
.map-responsive {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
height: 0;
}
.map-responsive iframe {
left: 0;
top: 0;
height: 550px;
width: 100%;
position: absolute;
}
<div class="map-responsive">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2996.145230917005!2d19.806475715791027!3d41.32745520767062!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x135031c2c95695d5%3A0x81dc10c851ceadac!2sSan%20Luca%20Klinik%C3%AB%20Mjek%C3%ABsore!5e0!3m2!1ssq!2s!4v1667130638394!5m2!1ssq!2s"
width="100%" height="550" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
After that, my results of the iframe Google Maps is as below:
But my purpose of the using Google Maps iframe embed is to make full screen in the left and right which now is empty, any idea how to make it??
Thanks in advance.
Add allowfullscreen at end of the tag
Try this snippet
<div class="map-responsive">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2996.145230917005!2d19.806475715791027!3d41.32745520767062!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x135031c2c95695d5%3A0x81dc10c851ceadac!2sSan%20Luca%20Klinik%C3%AB%20Mjek%C3%ABsore!5e0!3m2!1ssq!2s!4v1667130638394!5m2!1ssq!2s" width="100%" height="550" style="border:0;" loading="lazy" referrerpolicy="no-referrer-when-downgrade" allowfullscreen></iframe>
</div>
We've been trying to make embed video responsive on our website and managed to do it with code below. Unfortunately it doesn't autoplay anymore and I honestly can't find any solution to this.
CSS
#embed {
height: auto;
text-align: center;
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
.homevideo {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.homevideo iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTML
<section id="embed">
<div class="homevideo">
<p align="center"><iframe width="1000px" height="520px" src="https://www.youtube.com/embed/mUFAaEWb2_E?autoplay=1&mute=0&loop=1&vq=hd1080"name="youtube embed" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></p>
</div>
</section>
Before, we just had an iframe code which looked like it:
<p align="center"><iframe width="1000px" height="520px" src="https://www.youtube.com/embed/mUFAaEWb2_E?autoplay=1&mute=0&loop=1&vq=hd1080"name="youtube embed" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
and it worked well, was playing right after you entered our website on autoplay with sound, so we know it's possible. Sadly it wasn't responsive on mobile devices and was messing up our layout so we were looking for solutions to make it look good, but ended up with no autoplay.
Please try this
It will auto play.
<iframe width="420" height="315"
src="https://www.youtube.com/embed/mUFAaEWb2_E?autoplay=1&mute=1">
</iframe>
I have tried it, it works on my side
I embed a video from youtube to my web page I want it to be stretch 100% on the screen with no blackbars. Although I give it a width of 100%, it still has some blackbars on the sides of the video. How can I get rid of it?
Screenshot:
snippet: https://jsfiddle.net/o3rp6an9/1/
<div id="video">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/zWAiQJvwb8Q?autoplay=1&loop=1&controls=0&rel=0&showinfo=0&playlist=zWAiQJvwb8Q&modestbranding=1" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
#video {
height:100%;
width:100% !important;
background-size:100% 100%;
position:relative;
overflow:hidden;
}
There's another question about this but it basically didn't help me.
You want to absolutely position the video within a wrapper that sets vertical padding that matches the video's aspect ratio. To get the padding/aspect ratio, divide the video's height by the width and multiply by 100 to get a percentage.
* {padding:0;margin:0;box-sizing:border-box;}
#video {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}
#video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div id="video">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/zWAiQJvwb8Q? autoplay=1&loop=1&controls=0&rel=0&showinfo=0&playlist=zWAiQJvwb8Q&modestbranding=1" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
Using Bootstrap 4 classes embed-responsive embed-responsive-16by9 along with this css hack did it for me.
.embed-responsive.embed-responsive-16by9 iframe {
clip-path: inset(1px 1px);
}
I found the solution here:
https://github.com/twbs/bootstrap/issues/26284#issuecomment-392017929
I have problem with Including video in Prestashop!
This is the code I use to Include the video:
<div class="videoWrapper">
<iframe width="640" height="360" src="https://www.youtube.com/embed/3G1PFLuTrgM" frameborder="0" allowfullscreen></iframe>
</div>
And the CSS:
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: auto !important;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
But Is not working at all!
Anyone has any idea what can I do?
Thanks!
Change default inline width and height :
<div class="videoWrapper col-md-12">
<iframe width="100%" height="450" src="https://www.youtube.com/embed/3G1PFLuTrgM" frameborder="0" allowfullscreen></iframe>
</div>
Using Bootstrap is useful and easy, try to add height to your iframe using CSS (or keep default)
How to make the iframe in responsive with full width
iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
iframe, object, embed {
max-width: 100%;
}
This is my code but not working
Note:
If we have used height in pixels(IFRAME Tag) then comes correctly in full width. But not working in responsive
what is the solution?
I think this is what you are looking for. I assume that you are using YouTube so just paste in the embed link where the other link is.
HTML
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
CSS
.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%;
}
I used this guide: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
I used the same method for my own website and it works great. Hope this helps you out!