I am trying to get a YouTube video to display at 100% width and height. It seems the iframe itself is doing what I want, however, once the video plays it is only 100% width up to 1100px.
I have tried searching the web but cannot find a solution to get the video itself to be the same width as the video poster and iframe width.
Try this:
.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="container">
<iframe src="https://www.youtube.com/embed/ZLyS2wHiZM8"
frameborder="0" allowfullscreen class="video"></iframe>
</div>
Reference article
I assume your video ratio is 16:9. Maybe you can try this:
.container {
width: 100vw;
height: 56.25vw;
}
.video {
width: 100%;
height: 100%;
}
This is an example link
Your video has already a 100% width. When I make a right-click on the left or right side of the video, the context menu of the youtube video appears. Check this screenshot
I think the problem is about your video. Your video don't have the right width and height to appear correctly.
Related
I found this JSFiddle which does pretty much exactly what I'm trying to accomplish - https://jsfiddle.net/q1rjg9zd/
Notice that you can resize the output frame, and the video will always fill the entire frame, without any space above/below the video to maintain the 16:9 aspect ratio.
I'm trying to get this exact same effect, except I'd like it to be done in a wrapper div, instead of filling the whole viewport. E.g. I can have a div that is 1000px in height and 500px in width and the video would behave the same as in this example.
I'm really struggling to work out how to do this, since the JSFiddle example uses vw and vh measurements, and when I try to convert those to percentages and fixed pixel measurements, the effect is lost.
* {
padding: 0;
margin: 0;
}
.video-background {
position: relative;
overflow: hidden;
width: 100vw;
height: 100vh;
}
iframe {
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 100vh;
transform: translate(-50%, -50%);
#media (min-aspect-ratio: 16/9) {
height: 56.25vw
}
#media (max-aspect-ratio: 16/9) {
width: 177.78vh
}
}
<div class="video-background">
<iframe src="https://www.youtube.com/embed/biWk-QLWY7U?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1" frameborder="0" controls=0 allowfullscreen></iframe>
</div>
body {
height: 4000px;
}
.container-fluid {
z-index: 10011;
background: rgba(0,0,0,.5);
position: fixed;
width: 100vw;
height: 100vh;
top: 0px;
left: 0px;
align-items: center;
justify-content: center;
}
.video-wrap {
z-index: 10012;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
max-width: 800px;
margin: 0 auto;
}
.video-wrap iframe {
z-index: 10013;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-height: 1080px;
}
https://codepen.io/codepen_user_123/pen/JjRoPNW
I am trying to figure out how to hide the black background in the iframe. The problem is because of cross-domain requests, I cannot make any changes to the background to make it transparent, so I need to hide the black background using css, but I can't find a solution for it. I have tried various things on Google, but they only work on YouTube videos and not aws videos or any non video hosting websites with their own video players (not using vanilla html5 video players).
The black background is because the iframe's size is not the same as the natural video size. we can remove the background by defining a height and width of the iframe like so:
See width changed to 226px
<iframe width="226" height="315" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/39255/cat.mp4" frameborder="0" allowfullscreen></iframe>
Or the responsive version explained below:
What I did was find the aspect ratio of the Video specified in the iframe by just playing with the width and height until only the image of the cat was showing with no black bars surrounding it.
That gave me the width 226px and height 315px of the element which I need to create the aspect ratio for the parent element.
Using the same logic shown here, I made the wrapping container of the iframe have a
padding-top: calc((315 / 226) * 100%);
Then I added another container around this wrapping container and defined it's width property there. Based on the width of this main-wrapping container, the inner wrapping container height will grow/shrink responsively.
Then I float the iframe over it with positon: absolute and height: 100%; width: 100%;
That should be a good place for you to start. hope this helps.
Please see Codepen here:
https://codepen.io/Zlerp/pen/dypPybj
I am wrapping a video with this code:
.row-full {
width: 100vw;
position: relative;
margin-left: -50vw;
height: 780px;
margin-top: 0px;
margin-bottom: 0px;
left: 50%;
}
I can use 100vw for the width but I need to use the exact height for displaying the video correctly. THe problem is that on mobile devices the width resizes but the height stays the same. Is there a way to resize the height without using #media screen?
The URL where you can see the problem is the following:
Link to example
You can try this:
height: auto;
or Remove this from your code:
height: 780px;
Within Youtube the html to embed a video is of the form
<iframe width="560" height="315" src="https://www.youtube.com/embed/6Es-eaG4xPg"
frameborder="0" allowfullscreen></iframe>
but of course with trying to make pages mobile compatible there will be a problem when screensize less than 560 in width.
So I changed my code to
<iframe class="screencast" src="https://www.youtube.com/embed/6Es-eaG4xPg"
frameborder="0" allowfullscreen></iframe>
and in stylesheet had
.screencast {
width=560
height=315
}
the idea being i could have different sections for different media widths
i.e
#media screen and (min-width:300px) and (max-width: 499px) {
.screencast {
width=280
height=158
}
But this had no effect at all the video was now always shown on the screen too small and its size never changed it seems to be ignoring the css class
Then I found this question
Shrink a YouTube video to responsive width
which requires a div to be added round the frame
e.g
<div class="videowrapper">
<iframe src="https://www.youtube.com/embed/9Cf_xEbUzqE" n allowfullscreen></iframe>
</div>
and then this added to the css
.videowrapper {
margin:auto
float: none;
clear: both;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videowrapper iframe {
position: absolute;
width: 100%;
height: 100%;
}
This works except it makes the video take up the full width which I dont want, I can change the width
e.g
.videowrapper iframe {
position: absolute;
width: 50%;
height: 50%;
}
and that works except it doesnt horizontally centre the video
I have tried various things such as
.videowrapper iframe {
position: absolute;
left: 25%
width: 50%;
height: 50%;
}
but nothing I have done has centered the image, how can I resolve this, and why didn't my simple approach of putting a class on the iframe have any effect.
You can use this code
.video_center iframe{
margin: 0 auto;
display:table;
}
I have a simple html5 video player. I would like to stretch the video height to user screen height.
I have tried a lots of things, for ecxample this one:
height : auto !important; /* Ignored by Internet Explorer, applied everywhere else. */
height : 100%; /* Internet Explorer treats as min-height. */
min-height : 100%; /* Internet Explorer ignores this. */
But its not working. There is a living demo here:
http://boxy2.com/testvideo.php?url=http://boxy2.com/3n9?download_token=e99fdb10c5a929aa30d0f497d07f260eb16b511503b4520a4bdd48385b048b88&ad=0
That's my problem when I click on fullscreen it follows only the WIDTH property and not the height. If I remove width:100%, than its' size is about 300px height even on fullsrcreen.
The correct solution to this is to use now is to use object-fit:fill via CSS on the <video> tag.
video {
object-fit: fill;
}
CSS
video { height: 100vh; min-height: 100%; }
Most videos are 16:9 ratio, so in order to increase the height to the edges of the screen, you end up with a cropped view. The closest ratio to what you want is the old TV format of 4:3.
vh and vw are layout lifesavers here's more on viewport height and viewport width.
If you're looking for a full-height sol'n that always covers content area:
demo
html
<header role="banner">
<div id="wrapper-video">
<video poster="" autoplay loop>
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/156843/cut.mp4"
type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
</video>
</div>
</header>
css
section[role="banner"] {
position: relative;
width: 100%;
}
#wrapper-video {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
z-index: -100;
}
#wrapper-video video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
edit - working in Opera
If anyone else needs it. You can set for the video this:
video {
height: 100vh;
object-fit: cover;
}