Angular youtube-player video sizing overflows div - html

I'm using youtube-player api for a project in Angular, the problem is that the videos are widther than the parent div, I have to set the width and height in the options to make it display corectly in the div but when I see the page from a bigger or smaller screen, the video is getting smaller or bigger than the div, for example if I see the page from my cellphone, the videos are bigger than the div, I'm using Bootsrap 5 for the horizontal cards, so I set the videos to display in a col-4 while the card body is display in a col-8.
This is how it looks from my monitor
This is hot it look in an Ipad Air
And this is hot it looks in a cellphone
As you can see the videos are showing correctly in my monitor but with different widths the videos are smaller or bigger, here is my code:
HTML
<div class="col-lg-11" *ngFor="let video of videos | slice:1:5">
<div class="card h-100" >
<div class="row h-100">
<div class="col-4 col-lg-4 pe-0">
<youtube-player class="rounded-start d-flex"
videoId= {{video.videoId}}
suggestedQuality="default"
[height]="105"
[width]="160" >
</youtube-player>
</div>
<div class="col-8 col-lg-8">
<div class="card-body pe-0 pe-lg-auto">
<h4 class="card-title">{{video.titulo}}</h4>
<p class="card-text"><small class="text-muted">{{video.descripcion}}</small></p>
</div>
</div>
</div>
</div>
</div>
What can I do to make the videos display correctly?
Here is a live example in stackblitz
https://stackblitz.com/edit/angular12-bootstrap-3macyu?file=src/app/app.component.html

Ok, so after some more research I found a solution, not the best but at least the youtube videos are not overflowing the div, so heres what I did:
first as I'm using YouTube-Player library I have to use the youtube-player tag in my html and this generates an iframe ones the page is load to show the videos so heres what I put in the global CSS
div > youtube-player > iframe {
display: block;
width: 100%;
}
with this the youtube-player is taking the width the div have, so now I dont have to specify a width in the youtube-player options, only the height I want.
<youtube-player
class="rounded-start d-flex"
videoId="{{ video.videoId }}"
suggestedQuality="default"
[height]="90"
[width]="">
</youtube-player>
So for my horizontal cards I found that with height: 90 its enough to show the video without black bars at the top and bottom, and if the page is resize or seen from another device its going to show the black bars depending on the screen width but its not that bad because the video is still visible.
I update my stackblitz code with this if anyone wants to check it out and play with the height and resize the window.
https://stackblitz.com/edit/angular12-bootstrap-3macyu?file=src/app/app.component.html
*Also I dont know why theres white space below some videos but in my project theres no white spaces
Edit:
The white space is because the title is too long and is taking more space so the card is longer, just "break" the text to only show 1 line of text with:
.card-title{
overflow: hidden;
}
.break-videoTitle {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}

Related

Show a video inside a Bootstrap 4 grid area

I used Bootstrap 4 (4.4.1) to make a basic grid structure. It consists of two columns (each 50% width), where the left column has two rows (each 50% height). The upper left grid area should contain a video inside of it, without squeezing or squishing it. The rest that overflows should simply be hidden. I basically managed to do all of this except that the video spans over the whole left column, while I want it to be only in the first row of the column (which spans 50% of the columns height).
Relevant HTML snippet:
<div class="container-fluid d-flex h-100 flex-column">
<div class="row flex-grow-1">
<div class="col">
<div class="row h-50" id="video_wrapper" style="background-color: magenta;">
<video id="video" autoplay muted></video>
</div>
<div class="row h-50" style="background-color: lime;">
bottom left
</div>
</div>
<div class="col" style="background-color: aqua;">
<div>
right side
</div>
</div>
</div>
</div>
Relevant CSS:
#video_wrapper {
overflow: hidden;
}
#video {
/* Make video to at least 100% wide and tall */
min-width: 100%;
min-height: 100%;
/* Prevent the browser from stretching or squishing the video */
width: auto;
height: auto;
/* Horizontally flip the video */
position: absolute;
transform: scaleX(-1);
}
I tried a lot of stuff, but nothing would work. I have a JSFiddle below. It will use your webcam as the video – turn the webcam off to see the grid structure, the video should be inside the pink area. Unfortunately it also goes into the green area which should stay free. You can see this behavior when enabling your webcam.
JSFiddle: https://jsfiddle.net/matzewolf/zxbtq569/3/
Any help is really appreciated. Btw, I'm a newbie to web dev and Bootstrap, so please bear with me :)
Add position:relative to the parent of the video (class position-relative will do).
Explanation: When you use...
position: absolute;
/* top | bottom | left | right | width (%) | height (%) |
min-width (%) | max-width (%)... and there might be a few others */
...the element is sized/positioned relative to the reference parent, which is the closest positioned parent (or to <body> if none closer). Which means the closest parent with a set position other than static (which is the default value).
See it working.
A good article on CSS positioning.
Notice I also added classes d-flex justify-content-center align-items-center to the parent, which make your absolutely positioned elements be horizontally and vertically centered, responsively.

Landing Page Built with Bootstrap 4

I have had a landing page built for me which is fairly simple layout. But the problem is the Banner Photo is swamping the page and I have to scroll to see completed page. Is there an adjustment I can make to HTML and/or CSS to reduce the height of the banner photo by about a third?
There are a lot of different approaches of doing this. I'll just show you one, that should perfectly fit your current page and needs.
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 d-flex align-items-end overflow-hidden banner-image-container">
<img class="img-responsive" src="img/top-banner.jpg" width="100%">
</div>
(Inside your <style tag:)
.overflow-hidden {
overflow: hidden;
}
.banner-image-container {
max-height: 400px;
}
What I did is to limit the container around your image to a maximum height of 400px. Because your image is bigger then that, I added overflow: hidden; to the container, so it will cut the rest of the image off. Now your main focus in the image will be the building I guess. So I did move it all the way to the top with d-flex align-items-end.

Bootstrap Column in column

This is visual demonstration: Image
I'm trying to put in my laptop column(col-md-8) second column, but when I try, the other one went under the column of the laptop, how can I put a second(col-md-6)column inside a laptop column, and that column laptop still has its full size.
Do you want like this? It's a very short and a messy description you have. So I hope i'm right.
<div class="row">
<div class="col-md-8 col-sm-12">
<div class="row">
<div class="col-md-6 col-sm-6">
Laptop Image
</div>
</div>
</div>
</div>
"col-md-8 col-sm-12" classes will keep your column content as you like in tablet view+desktop view but when it becomes smaller like smartphone view, it will expand to the column to full width and you will still able to see your stuff inside of the laptop column.
Please read the bootstrap documentation from here. Anything else you want quick google will fix your issues or we're here at stackoverflow to help you out. :)
Update
This is what you want isn't it?
https://jsfiddle.net/5jrt314r/2/
Now Whatever goes inside of that .inside class will depend on the laptop image size you have. It will automatically horizontally and vertically center based on the .laptop class you have.
You said you want it responsive so you have to:
Keep your laptop element aspect ratio the same as the image.
Have a screen element that will always fill laptop's screen even if laptop image size changes due to it filling parent element.
If I am right you want this:
HTML:
<div class="row">
<div class="col-xs-8 laptop">
<div class="row">
<div class="col-xs-offset-3 col-xs-9 screen">
This column need to go in laptop screen
</div>
</div>
</div>
</div>
CSS:
.laptop {
background: url('http://devel0p.com/damir/wp-content/themes/helium/images/portofolio/macbook.png');
background-size: 100%;
background-repeat: no-repeat;
/* Padding will keep element aspect ratio so we always show image in it's original aspect ratio */
padding-bottom: 89.32%;
}
.screen {
background: red;
/* Make sure this element is always the size of the screen */
padding-bottom: 64%;
}
I calculated image aspect ratio to be 89.32~% by dividing width by height which is respectively 2084px and 2333px.
Here is a codepen example http://codepen.io/anon/pen/aNqKZL
UPDATE
In the first example .screen element would go beyond laptop screen because of it being stretched by it's content. Here is a version that deals with it http://codepen.io/anon/pen/qZxKRo

Bootstrap Printing and Column Resizing

I have done some digging on SO and have found a a variety of resources regarding printing and bootstrap.css, but I have not seen a solution to this particular problem.
Lets say I have a setup like seen in this Plnkr: http://plnkr.co/edit/7ETXQyEvY7S16JTU9wYB?p=preview
and HTML like this:
<div class="col-xs-6 red">
testing
</div>
<div class="col-xs-6 blue hidden">
123
</div>
The CSS states that during printing the column will be hidden (on my real page the stle is not hidden but hidden-print), which is expected, but is there anyway to now have the col-xs-6 red now take up the empty space left by the hidden blue column.
I know you could override the style col-xs-6 to be width:100%, but that would affect other columns on the page that need to be left at width: 50%.
Has anyone had this problem before, if so how did you address it?
For Bootstrap 4 you need to do a modification from #Lance's answer.
#media print {
.col-print-12 {
max-width: 100%;
flex: 0 0 100%;
}
}
With the same HTML
<div class="col-xs-6 col-print-12 bg-danger">
Red Column is full width for print
</div>
<div class="col-xs-6 hidden-print bg-primary">
Blue Column is hidden for print
</div>
I suggest something like:
#media print {
.col-print-12{
width:100% !important;
}
}
Then your HTML can be:
<div class="col-xs-6 col-print-12 bg-danger">
Red Column is full width for print
</div>
<div class="col-xs-6 hidden-print bg-primary">
Blue Column is hidden for print
</div>
!important is needed to override the regular col widths since at least one set will also apply at print width.
I updated your plunk using xs as a proxy for the print view here to demonstrate the concept. One red column in mobile, Red and Blue columns in tablet or bigger.
Edit: if you want to do it with CSS only you would have to use the flex property. Take a look at this pen. Change display: flex to display: none on any column and see how they stretch to fit the available space (this renders bootstrap useless).
Create a div container inside the bootstrap column and apply visibility: hidden to it. You want to hide without removing it, meaning the browser will still show the space that the element occupies.
It's a good practice not to add your own classes to bootstrap columns but instead create a container inside it so you can apply your classes to.
display: none gets rid of the element entirely and affects the positioning of the other elements that were around it.

Foundation 5: Horizontal Scroller: full screen div needed

I am very new to Foundation but found it to be very useful.
I am making a horizontal scroller website.
I have a fixed top bar.
There have to be different background images after each scroll.
Different images have to be in different div, Its a 10 page website, so I have set the body height as 1000px and width as 12000px, I am not able to set properties of the div.
<div class="row">
<div id="home123" class="large-12 columns">
</div>
</div>
#home123{
background-color: red;
}
this isn't working.
Make one page whole div and give css properties and another whole page a div and give different css properties