How to make responsive youtube video card/image with no black bars on top and bottom?
Try this, Thil will work, adjust the scale value as you wanted.
You can learn more about youtube image thumbnails here
.media-video-container { position: relative; overflow: hidden;}
.media-video-container img { /*position: absolute; top: 0; left: 0;*/ width: 100%; height: 100%; object-fit: cover; object-position: center; -webkit-transform: scaleY(1.2); -moz-transform: scaleY(1.2); -ms-transform: scaleY(1.2); transform: scaleY(1.2);}
<div class="list p-y"> <div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 video" *ngFor="let item of media"> <a class="block box card-item b-a media-item text-left" target="blank" href="{{item?.url}}" title="{{item?.name}}"> <span class="block clear img-card b-b b-light text-center media-video-container "> <img class="h-auto h-full w-full" src="{{getMediaImageUrl(item)}}" alt="{{item?.name}}"/> </span> <div class="box-body p-y-sm"> <div class="block clear text-sm"> {{item?.name}} </div> </div> <button *ngIf="item.type == 'video'" class="ytp-button ytp-large-play-button" aria-label="Play"> <svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%"> <path class="ytp-large-play-button-bg" d="..." fill="#212121" fill-opacity="0.8"></path> <path d="M 45,24 27,14 27,34" fill="#fff"></path> </svg> </button> </a> </div></div>
disabling blackbars on youtube embed iFrame
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>
Fullscreen video without black borders
Try adding to your CSS
.iframe-box {
max-width: 1280px; /* video width */
max-height: 720px; /* video height */
}
This means that width: 100%; height: 100%
will let the element will expand as much as it can, until it hits a maximum height or width of 720px
or 1280px
, respectively.
If the screen you're viewing it on has a greater resolution, the node will stop expanding and you'll not have black borders.
Further, afaik the following is not valid CSS, are you using a library or something?
#full-bg {
.iframe-box {
foo: bar;
}
}
Edit after answer accepted: I just thought of a completely different way to achieve this, but it would require you to change a lot of your CSS
.fittobox { /* give fit to box an aspect ratio */
display: inline-block; /* let it be styled thusly */
padding: 0; /* get rid of pre-styling */
margin: 0;
width: 100%; /* take up full width available */
padding-top: 56.25%; /* give aspect ratio of 16:9; "720 / 1280 = 0.5625" */
height: 0px; /* don't want it to expand beyond padding */
position: relative; /* allow for absolute positioning of child elements */
}
.fittobox > iframe {
position: absolute; /* expand to fill */
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
youtube video screen black bars scenario
Check it out on CodePen for viewport resizing to see the responsiveness.
https://codepen.io/rickydam/pen/dzyEoR/left/
Refer to this similar question.
Responsive fullscreen youtube video with no black bars?
This article sums up embedding a responsive Youtube video using CSS.
https://avexdesigns.com/responsive-youtube-embed/
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 0px; height: 0; overflow: hidden;} .video-container iframe,.video-container object,.video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
<div class="video-container"> <iframe src="https://www.youtube.com/embed/EgPRLAJB13c?autoplay=1&showinfo=0&controls=0" frameborder="0" allowfullscreen></iframe></div>
How do I embed YouTube videos without black bars?
Um. Try uploading a 16x9 video instead of a 4x3 one.
Related Topics
How to Disable a Checkbox Based on Conditions in Angular 6
Reverse Order of Columns in CSS Grid Layout
How to Remove All Script Tags from HTML File
Table With Fixed Header and Fixed Column on Pure CSS
Woocommerce Change Product Image on Hover With CSS
How to Toggle Mat-Expansion-Panel With Button Click
How to Remove the Space Between Inline/Inline-Block Elements
Hide Scroll Bar, But While Still Being Able to Scroll
How to Remove Hover Effect from Bootstrap Button
Disable Blue Highlight When Touch/Press Object With Cursor:Pointer
How to Align Anchor Tag With Button in Center
Regex Select All Text Between Tags
How to Make Flex Box Work in Safari
How to Customize the Validation of Input Type File Image
Make Container Shrink-To-Fit Child Elements as They Wrap
Html,Css - How to Horizontally Center Two Tables Side by Side