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)
Related
I have an iFrame on my website for a vimeo video that I don't want to be full screen. It's taking up the entire size of the page at 1046 x 588.38 px.
I have tried adjusting the height and width in the embed code to no avail. If I change the percentages in CSS it will break or become too small and still not respond to the height or width values.
HTML is as follows:
<section class="vid">
<div class="responsive">
<iframe width="640" height="360" src="https://player.vimeo.com/" frameborder="0"
allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</div>
</section>
The possible offending css is as follows:
.responsive {
width: 100%;
height: 0;
padding-bottom: 56.25%;
position: relative; }
.responsive iframe {
display: block;
position: absolute;
width: 100%;
height: 100%; }
you don't need to use width and height in .responsive iframe,
you can set the width and height inside the iframe element
.responsive {
width: 100%;
height: 0;
padding-bottom: 56.25%;
position: relative; }
.responsive iframe {
display: block;
position: absolute;
/* width: 100%;
height: 100%; */
}
<section class="vid">
<div class="responsive">
<iframe width="640" height="200" src="https://player.vimeo.com/" frameborder="0"allow="autoplay"></iframe>
</div>
</section>
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
This works great, until I have 2 or more iframes in the same container, then they just overlap each other because they both have the same absolute position.
How do I allow for an arbitrary number of iframes inside of a container built to house iframes and maintain their aspect ratios?
From: https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed
The key to creating a responsive YouTube embed is with padding and a container element, which allows you to give it a fixed aspect ratio. You can also use this technique with most other iframe-based embeds, such as slideshows.
Here is what a typical YouTube embed code looks like, with fixed width and height:
<iframe width="560" height="315" src="//www.youtube.com/embed/yCOY82UdFrw"
frameborder="0" allowfullscreen></iframe>
It would be nice if we could just give it a 100% width, but it won't work as the height remains fixed. What you need to do is wrap it in a container like so (note the class names and removal of the width and height):
<div class="container">
<iframe src="//www.youtube.com/embed/yCOY82UdFrw"
frameborder="0" allowfullscreen class="video"></iframe>
</div>
And use the following CSS:
.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Don't put 2 videos in the same container. Put 2 containers and wrap them in a single wrapper. Then change the width and bottom-padding to whatever you want.
.container {
position: relative;
width: 50%;
height: 0;
padding-bottom: 28.13%;
display:inline-block;
margin:0;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="wrapper">
<div class="container">
<iframe src="//www.youtube.com/embed/3Sdes6QuPro" frameborder="0" class="video"></iframe>
</div><div class="container">
<iframe src="//www.youtube.com/embed/yCOY82UdFrw" frameborder="0" class="video"></iframe>
</div>
</div>
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 embed a vimeo video on my website like this:
<div class="fys-fp-content-wrapper">
<div id="fys-fp-video">
</div>
</div>
#fys-fp-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 600px;
}
#fys-fp-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 600px;
}
The Vimeo iFrame is loaded into #fys-fp-video.
However the Video in its original is only 640px width. I want to always display the video in a width of 100%, regardless whether something of the video is but of because of the 600px height, but it is important that it is shown full width.
Does somebody has a hint how I can achieve that?
thanks!
If you use bootstrap, it's easy :
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Source Bootstrap 4: https://getbootstrap.com/docs/4.0/utilities/embed/
Update Bootstrap 5:
https://getbootstrap.com/docs/5.0/helpers/ratio/#example
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="embed-responsive embed-responsive-16by9">
<iframe lass="embed-responsive-item" src="https://player.vimeo.com/video/54596361" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
I think what you are looking for is vw (viewport width). width:100% means 100% width of the parent. width:100vw means 100% of the screen. I suggest you do like this:
#fys-fp-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 600px;
}
#fys-fp-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 600px;
}