I wanted to make a page almost like the youtube layout with the active video big on the top left and the other videos on the right . what would be the best way to go about it?
Are you talking about actual videos or did you just mean the two column layout?
What have you tried so far?
The layout basically and placing the videos so they keep their aspect ratio. I have the “active video” in place already its just the “more videos” i cant figure out. Heres the files so you can see https://www.dropbox.com/sh/o5fjie5c41mhlmy/AABHSWd39eNjAt48IrdUSXIQa?dl=0 i know youve taught me alot from my other post and im still figuring alot of that out aswell so excuse my coding if its bad. Thanks so much for the reply
You have the active video at 50% width and that leaves 50% width for the more videos. Is that what you wanted? that means they will all look much the same size.
Or were you going to have the active video be larger than the more videos as per the youtube page you mentioned?
Here’s what I would have assumed you wanted.
Inspiration.css:
.iframe-active {
float: left;
width:65%;
position: relative;
margin: 20px 0 20px 0;
padding-bottom: 28.12%;
background-color: #181B1B;
background:rgba(0,0,0,0.6);
border: 1px solid black;
border-radius: 2px;
box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3);
overflow: hidden;
}
.iframe-active iframe {
position: absolute;
display: block;
top: 0;
left: 0;
bottom:0;
right:0;
width:100%;
height:100%;
}
.more-videos {
float: right;
width:30%;
}
.more-vid{
margin:20px 0 30px;
position: relative;
padding-bottom:56.25%;
background:rgba(0,0,0,0.6);
border: 1px solid black;
border-radius: 2px;
box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3);
overflow: hidden;
}
.more-vid iframe{
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
width: 100%;
height: 100%;
}
.testtext {
display: block;
margin: 60% 0 0 0;
}
@media screen and (max-width:830px) {
.iframe-active {width:100%;}
.iframe-active iframe{width: 100%; height: 100%; margin: 0; top: 0; left: 0;}
.iframe-active{padding-bottom:56.25%}
.more-videos{float:none;width:auto;}
}
Inspiration.html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!-- must have viewport meta tag for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Allen Trey Productions</title>
<link rel="icon" href="titlelogo.ico" type="image/x-icon">
<link rel="stylesheet" href="practice.css">
<link rel="stylesheet" href="inspiration.css">
</head>
<body>
<div class="page-wrap">
<header class="header">
<div class="header-left logo"><img src="sega.png" width="450" height="125" alt="Allen Trey Productions"></div>
<img class="hamburger" src="Hamburger.png">
<nav class="navbaritems"> <a href="home.html">Home</a> <a href="#">Inspiration</a> <a href="vlog.html">Vlog</a> <a href="contact.html">Contact</a> </nav>
<div class="breadcrumbs"><b>Inspiration</b></div>
</header>
<main class="content">
<div class="clearfix">
<div class="iframe-active">
<iframe class="active-video" src="https://www.youtube.com/embed/aayZ9ybDTBw" frameborder="0" allowfullscreen></iframe>
</div>
<div class="more-videos">
<div class="more-vid">
<iframe width="560" height="315" src="https://www.youtube.com/embed/CVEhCJtPP1w" frameborder="0" allowfullscreen></iframe>
</div>
<div class="more-vid">
<iframe width="560" height="315" src="https://www.youtube.com/embed/1QfCg_f2Vnw" frameborder="0" allowfullscreen></iframe>
</div>
<div class="more-vid">
<iframe width="560" height="315" src="https://www.youtube.com/embed/evi12DFoPrc" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</main>
<footer class="footer">
<hr class="hr">
<!-- hitwebcounter Code START -->
<div class="sitecounter"> <a href="http://www.hitwebcounter.com" target="_blank"> <img src="http://hitwebcounter.com/counter/counter.php?page=6521120&style=0038&nbdigits=5&type=ip&initCount=0" title="Must See Places In Paris" Alt="Must See Places In Paris"> </a></br>
</div>
<iframe class="twitter" src="https://platform.twitter.com/widgets/follow_button.html?screen_name=Allen__Trey&show_screen_name=false&show_count=true"
title="Follow TwitterDev on Twitter" width="150" height="40" style="border: 0; overflow: hidden;"></iframe>
<p class="footer-txt">Allen Trey Productions © 2016</p>
</footer>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="hamburger.js"></script>
</html>
yes omg thats perfect! is there any way to change the videos from more vids become the big active vid? thank you so much for all your help !
Do you mean that when you play a video you want it to move into the big window on the left?
If so that will need to be scripted and would be a question for the JS forum.
Here’s my take on what you are asking.
inspiration.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!-- must have viewport meta tag for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Allen Trey Productions</title>
<link rel="icon" href="titlelogo.ico" type="image/x-icon">
<link rel="stylesheet" href="practice.css">
<link rel="stylesheet" href="inspiration.css">
</head>
<body>
<div class="page-wrap">
<header class="header">
<div class="header-left logo"><img src="sega.png" width="450" height="125" alt="Allen Trey Productions"></div>
<img class="hamburger" src="Hamburger.png">
<nav class="navbaritems"> <a href="home.html">Home</a> <a href="#">Inspiration</a> <a href="vlog.html">Vlog</a> <a href="contact.html">Contact</a> </nav>
<div class="breadcrumbs"><b>Inspiration</b></div>
</header>
<main class="content">
<div class="clearfix">
<div class="iframe-active">
<iframe id="main-video" class="active-video" src="https://www.youtube.com/embed/aayZ9ybDTBw" frameborder="0" allowfullscreen></iframe>
<div></div>
</div>
<div class="more-videos">
<div class="more-vid active-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/aayZ9ybDTBw" frameborder="0" allowfullscreen></iframe>
<div></div>
</div>
<div class="more-vid">
<iframe width="560" height="315" src="https://www.youtube.com/embed/CVEhCJtPP1w" frameborder="0" allowfullscreen></iframe>
<div></div>
</div>
<div class="more-vid">
<iframe width="560" height="315" src="https://www.youtube.com/embed/1QfCg_f2Vnw" frameborder="0" allowfullscreen></iframe>
<div></div>
</div>
<div class="more-vid">
<iframe class="video" width="560" height="315" src="https://www.youtube.com/embed/evi12DFoPrc" frameborder="0" allowfullscreen></iframe>
<div></div>
</div>
</div>
</div>
</main>
<footer class="footer">
<hr class="hr">
<!-- hitwebcounter Code START -->
<div class="sitecounter"> <a href="http://www.hitwebcounter.com" target="_blank"> <img src="http://hitwebcounter.com/counter/counter.php?page=6521120&style=0038&nbdigits=5&type=ip&initCount=0" title="Must See Places In Paris" Alt="Must See Places In Paris"> </a></br>
</div>
<iframe class="twitter" src="https://platform.twitter.com/widgets/follow_button.html?screen_name=Allen__Trey&show_screen_name=false&show_count=true"
title="Follow TwitterDev on Twitter" width="150" height="40" style="border: 0; overflow: hidden;"></iframe>
<p class="footer-txt">Allen Trey Productions © 2016</p>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="hamburger.js"></script>
<script>
$(function() {
$( ".more-vid div" ).on( "click", function() {
var videoSource = $(this).prev().attr('src') + '?autoplay=1';
$('#main-video').attr('src',videoSource);
$('.more-vid').removeClass('active-video');
$(this).closest('.more-vid').addClass('active-video');
});
});
</script>
</body>
</html>
Inspiration.css
.iframe-active {
float: left;
width:65%;
position: relative;
margin: 20px 0 20px 0;
padding-bottom: 28.12%;
background-color: #181B1B;
background:rgba(0,0,0,0.6);
border: 1px solid black;
border-radius: 2px;
box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3);
overflow: hidden;
}
.iframe-active iframe {
position: absolute;
display: block;
top: 0;
left: 0;
bottom:0;
right:0;
width:100%;
height:100%;
}
.more-videos {
float: right;
width:30%;
}
.more-vid{
margin:20px 0 30px;
position: relative;
padding-bottom:56.25%;
background:rgba(0,0,0,0.6);
border: 1px solid black;
border-radius: 2px;
box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3);
overflow: hidden;
transition:all .3s ease;
}
.active-video,.more-vid:hover{box-shadow: 0px 0px 0px 8px rgba(255,0,0,0.7);}
.more-vid iframe{
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
width: 100%;
height: 100%;
}
.testtext {
display: block;
margin: 60% 0 0 0;
}
.more-vid div{
position:absolute;
z-index:10;
left:0;
top:0;
right:0;
bottom:0;
}
@media screen and (max-width:830px) {
.iframe-active {width:100%;}
.iframe-active iframe{width: 100%; height: 100%; margin: 0; top: 0; left: 0;}
.iframe-active{padding-bottom:56.25%}
.more-videos{float:none;width:auto;margin-left:-20px;text-align:center;}
.more-vid{width:40%;float:none;display:inline-block;margin:0 0 30px 20px;padding-bottom:25%;}
}
@media screen and (max-width:480px) {
.more-videos{margin:0;}
.more-vid{width:260px;float:none;margin:10px auto 30px;padding-bottom:35%;}
}
If you click on a video in the right column it will swap the iframe source into the one in the left column and then autoplay. The active video on the right gets a red border to show its the one playing.
thats amazing! thank you ! i have another question ; i can never get divs to behave the way i want them to . in my contact page i cant get the div to size the way i want(width specifically) and its not responsive at all . i really appreciate you helping with the coding its amazing help but maybe can you point out some things im doing wrong instead ? its hard for me to see the correct coding and pick stuff out that im doing wrong . i hope that didnt come off negatively . i just want to become a better developer and i cant seem to see my own mistake which i know theres many lol thanks again man! 
Post #9 sounds like a new topic.
Divs that are not responsive usually have fixed widths or parents with fixed widths; therefore, they cannot adapt to various viewport widths Use “max-width” instead of “width” where fluid responsiveness is expected.
Learn to use the developer tools in your browser. They will help you identify causes of problems.
However, a basic knowledge and understanding of the behavior of different properties is necessary to know what to expect from them and why they might not be working. If you do not know why divs don’t adapt to different viewport widths, take a basic HTML/CSS class because you have jumped into the deep end and skipped the fundamentals.
Yes the problem is that you are mixing a number of properties that do different things and some like position:absolute will over-ride ‘float’ as both can’t be true.
You are also still positioning elements using relative positioning and absolute positioning and I told you not to do that in the previous thread where I went into great detail. As a beginner I will guarantee that you will not need to use relative position using offset co-ordinates at all.
I also mentioned that you are applying heights to fluid containers and you need to stop doing that also. let content dictate the height and if you need equal columns then use flexbox (as I did in your home page) or use one of the display:table/table-cell approaches. If equal height columns are not needed then floats are just as good as long as you remember to contain and clear trhem where necessary.
In your contact left column you have absolutely placed the heading which removes it from the flow and makes it impossible to use in a fluid layout. Stop doing that now 
When you have a 2 column layout you just create the 2 columns which can be floated (or use flexbox for modern browsers).If floating the columns you only need to describe the width for these two columns (flexbox allows more variations without using widths but is an advanced topic). Once you have the two columns in place then you simply place your content inside these column divs and this internal content needs nothing special at all. No widths or positioning is needed and simple margins can make space where necessary. In your contact page you had two columns but then you started sticking stuff outside the column containers instead of inside the containers.
Keep things simple and avoid widths, heights and positioning on the inner column elements because none are needed.
So to recap the basics:
-
Don’t use relative positioning (unless used for stacking context when used without co-ordinates),
-
Don’t use absolute positoining for elements that are in the flow and need to react to other elements.
-
Don’t add heights to containers that hold fluid content like text (indeed there are very few times when you will need an explicit height).
-
Position your main columns and then stack content inside those containers. Don’t make multiple floats or positioning when the parent is already positioned in the right place. (By positioning I am not referring to absolute or relative but the fact that the element is moved somewhere by either floating, margins, flexbox or display:table/cell etc…)
In your contact form you already have 2 columns so put the content inside those columns and don’t absolutely place the content. It seems you have styled the whole column so if you only want the inner element to have that shadow effect then remove the shadow/background etc from the main container and apply it your inner content instead. Let the 2 column containers hold all your content for the left and right.
I won’t redo your contact page this time but let you read through the above and the previous thread and then try and code it yourself. If I see a height, or absolute or relative positioning in those two columns then I will know you have not been listening
2 Likes
Ohkay i got it to work out! i know its not perfect im still working on it lol but as far as the responsiveness i think its good . tell me what you think https://www.dropbox.com/sh/o5fjie5c41mhlmy/AABHSWd39eNjAt48IrdUSXIQa?dl=0 just keep in mind its not done lol
It looks as though you are making good progress.
You still have some basic html to sort out as things like this are nasty:
Name:<br>
<input type="text" name="name"><br><br>
html has a purpose and once you use it properly it provides information to all users and aids accessibility no end.
A label is a very important element for inputs because without it screenreader users have no clue what data they need to enter. You should associate the input label (for=“”) with the form control id and in doing so you provide more hooks for styling and a more logical structure and the benefit that clicking the label takes you to the input so greatly aiding those with poor motor skills also.
e.g. The above could be:
<label for="name">Name:</label>
<input type="text" name="name" id="name">
No breaks needed and you could set both to display:block and apply margins to control the spacing. I generally put a div around each input pair because when you get into form validation you can tie error messages to the surrounding div and effect a change on the elements within by adding a simple class to the div.
This rule seems to break the layout at 950px:
@media screen and (max-width: 950px)
.contact-div {
margin: 5% 0 0 8%;
}
There seems no need for that as it messes the alignment up and indeed you give an 8% left margin to an element that is 100% wide and therefore it can never actually fit inside its container because it takes up 108% now.
Be careful with your calculations.
4 Likes
thanks man i really appreciate all your help! you taught me SO much
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.