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
Related
Help me figure out why "HOME" hyperlink doesn't work please. When I go on the hyperlink it is impossible to click on it with the pointer. I tried everything. I'm a rookie, please help.
figcaption {
position: absolute;
cursor: pointer;
pointer-events: none;
bottom: 0;
height: 10%;
right: 0px;
left: 0px;
width: 100%;
text-align: center;
font-size: 110%;
color: black;
}
.video {
position: fixed;
width: 80%;
padding-top: 56.25%;
}
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
<div class="video">
<figure>
<a href="index.html">
<figcaption>HOME</figcaption>
</a>
<iframe class="responsive-iframe" src="https://player.vimeo.com/video/..." width="1080" height="459" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</figure>
</div>
its not working because you added css for figcaption as pointer-events:none.
delete that line the it may work.
Below code is fully redundant. You delete it and the hyperlink will work perfectly
cursor: pointer;
pointer-events: none;
Happy to present you the final answer. IT WORKS :). I test and localize knew where you got it wrong, you messed up the code in tag. Use my code below which works well for reference.
All you need to do is go to vimeo and copy the embedded link again. You somehow corrupted vimeo link code before. Now you can green tick this answer we got it done this time :).
<p>A Love Letter to Winter from The North Face on Vimeo.</p>
<div class="video">
<figure>
<a href="index.html">
<figcaption>HOME</figcaption>
</a>
<iframe class="responsive-iframe" src="https://player.vimeo.com/video/259411563" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</figure>
</div>
When i embed YouTube video in iframe it works fine but in full mode the video is not visible entire the screen
<iframe src="https://www.youtube-nocookie.com/embed/rGmF2CaDiBg?rel=0"
frameborder="0" allow="autoplay; encrypted-media" class="iframe"
id="Overlayvideo" **allowfullscreen="true"**>
</iframe>
Use the following in your css
#Overlayvideo { width: 100%;}
HTML :
<iframe src="https://www.youtube-nocookie.com/embed/rGmF2CaDiBg?rel=0"
frameborder="0" allow="autoplay; encrypted-media" class="iframe"
id="Overlayvideo" allowfullscreen>
</iframe>
CSS :
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
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%;
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!