Hello, I am creating a Business Department website for my school and I have created a resource page where people can view videos related to business. I am having trouble creating several rows with 3 videos on each row. I have attempted this but the whole video thumbnail does not show and there are black borders. I am also having difficulty trying to show the full thumbnail on the mobile version of this page. P.S. I am very new to HTML, CSS, and Bootstrap. (I have been only learning for a couple of months). It would be greatly appreciated if you could explain your code simplistically.
I replaced the images with the video. As you can see, the whole thumbnail does not show.
In this screenshot, here is a video that shows the full thumbnail without any black borders. The problem is, I do not know how to align the row with three videos instead of one.
On the mobile version, the full video thumbnail does not show. I would like to show the whole video thumbnail in the mobile version.
Here is my code (This only shows the video with the whole thumbnail showing. This does not include the code where I inserted the video aligned with the two logos):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Business Department</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.navbar {
margin-bottom: 0;
border-radius: 0;
/* background-color; he put it purple make it stay gray or change to dark gray */
color: #474747; /* text color */
padding: 1% 0;
font-size: 1.2em; /* This increases text font */
border: 0; /* the black thing */
}
.navbar-brand {
float: left;
min-height: 55px;
padding: 0 15px 5px;
}
.navbar-inverse .navbar-nav .active a, .navbar-inverse .navbar-nav .active a:focus, .navbar-inverse .navbar-nav .active a:hover {
color: #FFF;
background-color: #222222; /* for the black thing in home */ /* #232323 try to change later on if it does not match with anything else */
}
.navbar-inverse .navbar-nav li a {
color: #D5D5D5; /* text color?? */
}
.carousel-caption { /* this moves the text in the sliders up */
top: 50%;
transform: translateY(-50%);
text-transform: uppercase;
}
.btn { /* get started button */
font-size: 18px;
color: #FFF;
padding: 12px 22px;
background: #000000;
border: 2px solid #FFF;
}
.container {
margin: 4% auto;
}
#icon {
max-width: 200px; /* to change the size of 3 images */
margin: 1% auto;
}
footer { /* to design footer (no text) */
width: 100%;
background-color: #222222;
padding: 5%;
color: #FFF; /* text color */
}
.fa {
padding: 15px; /* social media pics size */
font-size: 25px;
color: #FFF;
}
.fa:hover {
color: #D5D5D5;
text-decoration: none;
}
@media (max-width: 900px) {
.fa {
font-size: 20px;
padding: 10px;
}
}
@media (max-width: 600px) { /* this is to not show the getting started buttons and header on mobile */
.carousel-caption {
display: none;
}
#icon {
max-width: 150px;
}
h2 { /* h4 size in mobile */
font-size: 1.7em;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <!-- for mobile burgr nav -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--change to business logo --> <a class="navbar-brand" href="#"><img src="img/w3newbie.png"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<!--#for a ink --> <li class="active"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="courses.html">Courses</a></li>
<li><a href="deca.html">DECA</a></li>
<li><a href="schoolstore.html">School Store</a></li>
<li><a href="resources.html">Resources</a></li>
<li><a href="contacts.html">Contacts</a></li>
</ul>
</div>
</div>
</nav>
<!-- div below is for sliders -->
<div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- For sliders -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/resources2.png"> <!-- image for first slider-->
<div class="carousel-caption">
<h1>resources</h1> <!-- header text for first slider-->
</div>
</div> <!-- End Active -->
</div>
</div>
<div class="container">
<p>Are you a student currently taking a business for the school year? Are you having trouble understanding what the teacher taught you? Are you confused with your business assignments and homework questions? This page will help you with whichever business course you’re in by providing textbook PDFs, videos, examples, visuals, and links pertaining to the business topic of interest. Furthermore, homework from each business class will be added daily to ensure that you do not forget what tasks were assigned in class and to catch up on any work you might have missed. Hopefully, the resources available will greatly benefit your success and improve your knowledge on the business course you are taking.
</p>
</div>
<div class="embed-responsive embed-responsive-4by3" style="display:block; margin: 0 auto; max-width:560px; padding-bottom:315px;">
<iframe class="embed-responsive-item" style="max-width:560px; max-height:315px;"
src="https://www.youtube.com/embed/jizrQFj9tE0"></iframe>
</div>
<!-- footer -->
<footer class="container-fluid text-center">
<div class="row">
<div class="col-sm-4">
<h3>Contact Us</h3>
<br> <!-- line break -->
<h4>Our Address and contact info here.</h4>
</div>
<!-- For social media pics -->
<div class="col-sm-4">
<h3>Connect</h3>
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-google"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-youtube"></a>
</div>
<div class="col-sm-4">
<img src="img/bunny.png" class="icon">
</div>
</div>
</footer>
</body>
</html>
1 Correct answer
Bootstap is a 12-box grid system. Make 3 columns and place your elements inside the columns.
4 x 3 = 12
<div class="col-md-4">
COLUMN 1
</div>
<div class="col-md-4">
COLUMN 2
</div>
<div class="col-md-4">
COLUMN 3
</div>
What is the aspect ratio of your video? Standard is 4:3, wide screen is 16:9.
Embedded 4:3 Responsive Aspect Ratio (YouTube video)
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe
2
Replies
AdChoices