I'm trying to make my video playing site look something like this. (There shouldnt be padding at the sides and top/bottom) Where it fills out the screens width fully and height fully to the header and footer.
I keep getting some strange padding at the sides and bottom. The height is pushing down the footer.
My current css/html
<div class="container">
<div class="row" >
<div class="header col-xs-12">
<h1>Hello</h1>
</div>
</div>
<div class="row video-container">
<div class="col-xs-12">
<video autoplay loop="true">
<source src="assets/videos/mov_bbb.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="row">
<div class="footer col-xs-12">
<h2>Test</h2>
</div>
</div>
</div>
Css
.container{
width:100%;
}
video{
width: 100%;
height: auto;
}
.header, .footer{
background-color: #3FBCA3;
}
.padding-0{
padding-right:0;
padding-left:0;
}
I'm coding in Angular 2, and using bootstrap responsive grid system
Related
An embedded video will not size to the container div. I've edited the CSS and finally got the poster image to scale correctly, but now the video has cropped on left and right sides by about 50px respectively.
Am I missing a container for the video in the HTML5? Could you please take a look to check my markup and styling?
.blog-side {
position: relative;
}
.wrapper {
margin: 0 auto;
}
.videowrapper {
width: 100%;
height: auto;
text-align: center;
overflow: hidden;
position: relative;
}
<section class="blog-side sp-seven blog-style-one standard-post video-post">
<div class="container">
<div class="row">
<div class="col-md-9 col-sm-12 col-xs-12 content-side">
<div class="blog-details-content">
<div class="wrapper">
<div class="videowrapper">
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" controls poster="images/news/orphan.png">
<source src="video/video1.webm" type="video/webm">
</video>
</div>
</div>
</div>
Many examples and instruction that I'm finding on google don't seem to work. I'm trying to keep the code clean.
Aspect Ratio
In the following demo any tag with non-Bootstrap classes was removed (it's a variable we can do without ATM. The Bootstrap looks good, There's two possible issues:
It could one or more of the non-Bootstrap classes.
or
The dimensions of your video isn't 16:9 ex. 640x360px, 1024x576, etc. The Bootstrap class .embed-responsive-16by9 requires that your video have an aspect ratio of 16:9.
Demo
The video in this demo is 320x240px an aspect ratio of 4:3 and the video tag has the class .embed-responsive-4by3
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<main class="container">
<section class="row">
<section class="col-md-9 col-sm-12 col-xs-12">
<figure class="embed-responsive embed-responsive-4by3">
<video class="embed-responsive-item" controls>
<source src="http://shapeshed.com/examples/HTML5-video-element/video/320x240.ogg" type="video/ogg">
</video>
</figure>
</section>
</section>
</main>
Okay I do not know wether I have started completely wrong or just do not know how to get it right.
I want the layout of my website to be like this:
I put a div called 'myWrap' around the header and the content. And added this css:
.myWrap {
position: absolute;
padding: 0px;
margin: 0px;
background: white;
top: 2%;
left: 2%;
right: 2%;
}
.footer {
position: absolute;
background: #363130;
margin-top: 2%;
height: 300px;
left: 0;
width: 100vw;
}
And the footer is not in the myWrap-div. But now it is just floating behind the content because the position of the myWrap is absolute.
How do I put the header and content in the normal flow but infront of the background?
I structured the html like that:
<div class="row container-fluid myWrap">
CONTENT
<div class="container-fluid footer">
FOOTER
</div>
</div>
If I put the footer out of the myWrap div it starts floating around on the top or just overlaps the content/header
Change .myWrap to position: relative, your footer is getting the position absolute of the body, because It dosn't have a parent element with a relative position CSS atribute.
.myWrap {
position: relative;
}
With this, you will get your footer always on the bottom of myWrap. Then you can play with, the top/bottom properties and place it where you want ;)
I have created a Bootply to show it how it's working: http://www.bootply.com/8Wmx3CJHFv
Try this
<div class="myWrap">
<div class="container">
<div class="row">
Then add your footer after the end of the container
Personally, I would not work with your own wrapper. Bootstrap made them with a reason and that reason is they will work perfectly for responsive viewports.
I'd suggest you enhance something like this:
HTML
<html>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</header>
<section id="content">
<div class="container">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</section>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</footer>
</body>
</html>
CSS
body {background-color: #FFF;}
footer {background-color: #FFF;}
header {background-color: #FFF;}
.container-fluid {padding: 0 0;}
Just make sure you remove the padding for the .container-fluid. And a tip: if you ever feel like creating your own wrapper, don't position them with absolute, but with relative. Otherwise it won't work well on all viewports.
You mentioned that you are using bootstrap, in bootstrap the container class wraps your data into a wrapper that has a fixed width on each screen-device-width so you will need to add a container div for the header and the content without adding it inside the footer div.
If you are using bootstrap framework you will need to use these following classes for these div's as the following code:
<div class="site-container">
<div class="header">
<div class="container">
</div>
</div>
<div class="content">
<div class="container">
</div>
</div>
<div class="footer">
</div>
</div>
<style>
body{
background:url(../image.jpg);
}
header {
max-width:600px;
width:100%;
display:block;
background:#ccc;
height:250px; //header height no need to mention in your work
border:1px solid #000;
margin:auto;
}
#content {
max-width:600px;
width:100%;
display:block;
background:#ddd;
height:500px; //content height no need to mention in your work
border:1px solid #000;
margin:auto;
}
footer {
width:100%;
height: 300px;
left: 0;
background:#000;
}
</style>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
// Header
</div>
</div>
</div>
</header>
<section id="content">
<div class="container">
<div class="row">
<div class="col-lg-12">
// Content
</div>
</div>
</div>
</section>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</footer>
Demo: https://jsfiddle.net/q4Lcjmsy/3/
I have two elements on my page which I wish to align side by side, what would be the best way of going about this, and can somebody explain the best way to go about coding it when you want to align elements together.
In this example I want the video to take up most of the room say 3/4 and the chart to be in the remaining 1/4. (Bootstrap is loaded on this page)
Any suggestions?
This is what it currently looks like:
http://i1057.photobucket.com/albums/t390/Alexwileyy/element_zps066ecdd2.png
(I have outlined the video in a color so I can see the perimeters)
This is my HTML code for the two elements:
<!--Video Section-->
<div class="video">
<div class="container">
<div class="video-element">
<iframe width="460" height="215" src="//www.youtube.com/embed/PdABTJhRTLY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<!--End Of Video Section-->
<!--Start of chart-->
<div class="container">
<div class="chart">
<div class="chart-cont">
<h1 id="chart-header">Charts</h1>
</div>
<div class="chart-cont">
<h1>1</h1>
<img src="http://www.spotlightreport.net/wp-content/uploads/2013/06/gran-tourismo-6-banner-3.jpg">
View Review</td>
</div>
<div class="chart-cont">
<h1>2</h1>
<img src="http://savegameonline.com/wp-content/uploads/2013/05/CoD-Ghosts-banner.png">
View Review</td>
</div>
<div class="chart-cont">
<h1>3</h1>
<img src="http://bit.ly/1tSu4iq">
View Review</td>
</div>
<div class="chart-cont">
<h1>4</h1>
<img src="http://www.spotlightreport.net/wp-content/uploads/2013/06/gran-tourismo-6-banner-3.jpg">
View Review</td>
</div>
<div class="chart-cont">
<h4>View More..</h4>
</div>
</div>
</div>
<!--End of chart-->
This is my CSS code for my two elements:
.chart {
background-color:white;
width:400px;
margin-bottom:10px;
margin-top:-35px;
}
.chart-cont * {
display:inline;
}
.chart-cont {
padding:10px;
box-shadow: 0 2px 5px rgba(26,26,26,0.75);
text-align:center;
}
.chart-cont img {
width:180;
height:60px;
}
.chart-cont h1 {
vertical-align:middle;
}
Any answers greatly appreciated.
First if you want to work with 3/4 of the screen, start using a percentage as width.
First create a content Div, then a LeftContent and a RightContent div.
Like this:
<div class="Content">
<div class="LeftContent">
</div>
<div class="RightContent">
</div>
</div>
CSS:
.Content{
width:100%;
margin:10px;
padding:10px;
}
.LeftContent{
width:60%;
margin:10px;
float:left;
}
.RightContent{
width:30%;
margin:10px;
float:right;
}
Now you can place the video left, and the other images right, adjust how you want to with padding, margin and width percentage, test with making your window smaller (how it looks like on smaller screens).
Notice to make use of float left and float right.
Here is JSFiddle link: http://fiddle.jshell.net/7pp7q/1/
I have a large image which I want to display using the entire width of the browser.
My code is:
<html><body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3> Welcome! </h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="main_image">
<img src="..."/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="main_content">....</div>
</div>
</div>
</div>
</body></html>
Bootstrap will automatically create margins/padding to make the image fit in the center of the page.
Is there a way to always allow the main image to fit the entire width of the browser, but keep the padding/margins for everything else on the page?
Your best bet is to assign the image as a background-image.
Here's a JSFiddle (https://jsfiddle.net/qoaqjgpz) with only the most important stuff from http://startbootstrap.com/template-overviews/full-width-pics/.
The .html:
<div class="image-bg-fixed-height">
</div>
The .css:
.image-bg-fixed-height {
background: url('http://lorempixel.com/g/1920/500/') no-repeat center center scroll;
height: 450px;
}
.img-center {
margin: 0 auto;
}
Let me know if this is what you were searching for.
I am trying to make the Images in "fullwidthbanner" as fully responsive. May be the problem is that it has two images which I want it to transform with size.
This is my HTML
<div class="main-container col1-layout">
<div class="main row-second clearfix">
<div class="col-main">
<div class="std"><div class="sub-container"><div class="fullwidthbanner-container">
<div class="fullwidthbanner>
<div class="item"><img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="Random Collection"></div>
<div class="item"><img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="Random Collection"></div>
</div>
</div>
</div>
</div>
</div>
CSS
.sub-container {overflow:auto;}
.main-container {background:#fafafa; }
.main { margin:0 auto; position: relative; z-index:1; }
.sub-container div.item{ background-color:red; float:left;}
.sub-container div.item:hover{ background-color:green;}
.sub-container div.item img{ width:100% !important; display:block;}
For some reason, it does everything I want it to, but both the Images are fully extending in terms of width. The width always remain the same and when the window size increases, it just shows an empty space in front of both images.
Assuming this is the html:
<div class="main-container col1-layout">
<div class="main row-second clearfix">
<div class="col-main">
<div class="std">
<div class="sub-container">
<div class="fullwidthbanner-container">
<div class="fullwidthbanner">
<div class="item">
<img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="Eid Collection" />
</div>
<div class="item">
<img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="Eid Collection" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Does this css do what you want?
.sub-container div.item {
background-color: red;
float: left;
width: 100%;
}
Although I would suggest using max-width, instead of width -- this will make it adapt to smaller screens, and on larger screens it won't get blurry.