I have multiple videos that I would like to be resized to it's parent bootstrap div in a grid format but the weird thing is that it's increasing the size of the col but not the video itself.
Here is a sample of how the code goes in the grid format. In my CSS file, the class gif-video width and height is both set to 300.
Here is an image representing my problem.
If i change the gif-video width and height to 100%, here is how it looks like. The size is correct but there are empty spaces as though the div got pushed down.
Here is an image representing this issue.
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<video class="gif-video" autoplay loop poster="http://thumbs.gfycat.com/<%= title %>.jpg">
<source src=<%= gif.webmurl %> type="video/webm">
<source src=<%= gif.mp4url %> type="video/mp4">
</video>
</div>
</div>
</div>
Set max-height and max-width to div , some of video must been little bit bigger and maybe push paddings to right or bottom
Related
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/
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.
So I'm trying to add a full width (not full screen) video under my navbar using Bootstrap 4 and I cant seem to get rid of these white bars on the side (padding I assume).
<body>
<!-- body code goes here -->
<div id="top-nav-fluid" class="container-fluid fixed-top">
<div class="container">
Bootstrap Nav code here
</div>
<!-- nav container -->
</div>
<!-- nav fluid container -->
<div id="top-banner-vid" class="container-fluid">
<div class="row">
<video autoplay loop muted>
<source src="http://www.icutpeople.com/wp-content/themes/icutpeople/assets/video/waynesworld.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<!-- The top banner video fluid container -->
I've tried doing a -15px left and right margin on the top-banner-vid fluid container but this just made a larger white space on the right side. No matter how much I adjusted the right margin it remained the same size.
I tried putting a div row inside the fluid container. This worked for the side margins but put my video in the middle of the page. I tried to fix that with alighting it to the start, but it did not move.
Not sure what else to try. Thank you very much for your time.
Add the class no-gutters to the row to get rid of the gutters.
That's how you remove that unwanted margin in Bootstrap 4.
Your content, ANY content, must then always go into a Bootstrap column.
Only Bootstrap columns may be direct children of Bootstrap rows. No exceptions.
And if you only need one column, just use the col class for that.
You may also need to add the px-0 (horizontal padding 0) to the container like so:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="top-banner-vid" class="container-fluid px-0">
<div class="row no-gutters">
<div class="col">
<video class="embed-responsive embed-responsive-16by9" autoplay loop muted>
<source class="embed-responsive-item" src="http://www.icutpeople.com/wp-content/themes/icutpeople/assets/video/waynesworld.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
I am trying to play a mp4 on the main page of my website. I have a sample mp4 below to test with ..... but I would like to keep it width 100% which is does, but remove a certain percentage of the top and bottom so I have a thinner video. Below keep it responsive but I need to reduce the top and bottom by say 10%
<div >
<div >
<div align="center" class="embed-responsive embed-responsive-16by9 " style="background-color:red;">
<video id="video01" autoplay loop class="embed-responsive-item"
style="background-color:green;">
<source src="http://elevationchurch.org/wp-content/uploads/2016/01/Website_GetInvolved_v3.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
I think SVG Masking is a solution. You can read about it here : http://svglab.com/exp/masking-video.html
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>