There are similar questions but I couldn't find an answer to my specific need for the container to be always wrapping around the video without leaving empty spaces (letterboxing), video not to overflow and video aspect ratio not to change. I tried everything, either the horizontal video works or the vertical video works, but never both.
Simple sample code to get the idea across:
<div class="parent" style="max-height: 150px; max-width: 100px;" >
<!-- Mock horizontal video -->
<video class="video" width="400" height="200"></video>
</div>
<div class="parent" style="max-height: 150px; max-width: 100px;">
<!-- Mock vertical video -->
<video width="200" height="400"></video>
</div>
I would like any video input to fit the parent container without overflowing and stretching, while the parent container wraps around the video wherever there is empty space not filled with video.
The end result from this should look like this:
note: wrong height on the second shape. Should have been 150px. Unable to reupload the fixed version.
Here's a JSFiddle link with the clean mock: https://jsfiddle.net/wfhv389j/63/
Related
I want the video iframes to use the full container width.
To illustrate, I have a Bootstrap v5.2.2 container with a single row using justify-content-center and a single column using col-auto:
<div class="container">
<div class="row justify-content-center">
<div class="col col-auto">
...
</div>
</div>
</div>
This centers paragraphs within the column div if none of them fill the full width of the container, while keeping paragraphs left-justified.
That works great, except when I embed YouTube videos as iframes in the column div.
The iframes are only as wide as the widest content in the column div. If the longest content other than an iframe is the word "the", the iframe is literally that wide; it's unusable. If the iframe is the only item, then it's not displayed at all.
Here's an example of a YouTube iframe:
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8" allowfullscreen></iframe>
If I use the Bootstrap "embed-responsive" and "embed-responsive-item" classes like this:
<div class="embed-responsive">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8" allowfullscreen></iframe>
</div>
Then the iframe is displayed, but it's a constant 300px width, even if the container or other content is much wider, which looks tiny and is difficult to use on desktop displays.
I can't figure out how to have text centered in the container by col-auto, but have YouTube iframes expand to always fill the container width.
I need help to understand one thing: a picture tag behaves like a container for an img tag if its parent has 'display: flex'.
If I add width:50% to img, it doesn't make img 50% of div but make img 50% of picture. If I add width:50% to picture and width: 100% to img it works as I need.
But why do I need to add style to the picture to make img 50% of div? I thought that picture is just an invisible wrap to keep sources. But it behaves like a div. Why?
<div style="display: flex;">
<picture style="width: 50%">
<source srcset="img/cmn/logo.webp" type="image/webp">
<img src="image.png" alt="img" style="width: 100%;">
</picture>
</div>
When using a <picture> element, it effectively takes over as the principal element of its content, the content becomes dependencies of the picture element. So how this works is expected.
You now work with the picture element and not with the individual image element(s) inside of it. This means you have to scale the picture element and not anything inside of it.
That said, it's common practice in responsive web design to always have img elements fill the full width of their parent container (width: 100%;), for responsiveness to become easier to handle and more predictable.
Authoritative information: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
From the specification
The picture element is a container which provides multiple sources to its contained img element
So yes, it behaves like a div for the image and in your case the picture is the flex item (not the image)
I have a website using bootstrap and on the core of my page I have a picture and below is a youtube video embeded:
<div class="col-xs-12 col-sm-12">
<a href="tech.php">
<img class="img-responsive img-rounded" src="assets/tech_withText.jpg" alt="Generic placeholder image" width="1200" height="600">
</a>
<br>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/RTwv1Dn2rYQ" width="300" height="150" frameborder="0" autoplay=1 allowfullscreen></iframe>
</div>
</div>
Link to website here.
When I first load this page what I see with this solution (and dislike) is that my video extends below my screen. So I am after a way to state the size of my picture and video as a ratio of the screen size, so that my video resizes to stay within the boundaries of the screen.
I have looked for ideas on the internet (i.e. css edit as in here) but I get lost or it does not do what I expect.
Any idea?
If you just add a CSS entry to specify the minimum height of the video it will not clip it on load and bootstrap will take care of keeping it in ratio on resize. Code:
.embed-responsive{
min-height:100%;
}
Of course you will probably want to target the div a little more specifically but I think this should do what you are after.
I would go about this differently, I wouldn't use an absolute positioned element for video and I would set a height or min-height to use viewport units vh
So it might look like:
#youtube-video {
width: 100%;
min-height: 40vh;
}
And remove all the absolute positioning on that element.
Additionally you might want to set an ID or class on your top container and give it some margin-top to offset your fixed header:
#top-container {
margin-top: 50px;
}
Lastly I would move the footer outside the bootstrap container completely by moving the </div> to be above your footer.
<div class="container">
....
</div>
<footer class="footer">
...
</footer>
this is how it should look but when I paste the same code:
<!-- dummy div -->
<div style="height:100px;">
</div>
<!-- outer div to contain inner div (that has a margin) -->
<div style="height:80vh;">
<!-- inner most div now has its boundary defined by the outer div, so adding a border wont extend its width beyond the width of the browser window -->
<div style="height:80vh; padding: 20px;">
<!-- iframe set to fill 100% of its containing div -->
<iframe src="http://insitu-app.com/insitu-tgrg-simplified.html" style="top:0; left:0; height: 100%; width: 100%; margin-left: auto; margin-right: auto; border: none" frameborder="0" allowfullscreen></iframe>
</div>
</div>
into the wordpress code editor and publish, this is what I get . I want the div tag and its contents to take up 80% of the viewports vertical height. If this method isn't possible on wordpress and they're is an alternative please tell me? Many Thanks
Check the code in TEXT VIEW of content editor.
Wordpress content editor generates some tags when you paste content in it.
Paste the same using TEXT VIEW and make sure no other text is there. It'll work fine.
In your current case extra <code>..</code> and <p>...</p> tags are being generated.
having an issue, it's early in the morning so it's probably very simple! basically this is my code:
<div class="form-group">
<label>Preview</label>
<div style="border:1px solid black; height:2px!important;"class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="//player.vimeo.com/video/{{$video->link}}"></iframe>
</div>
</div>
For some reason I cannot set the height of the video div. Currently the problem is that the iframe is sized correctly, but the containing div has an unnecessary height which is pushing the form submit button down out of the user's view. I would like to be able to adjust the height of the div