How did you come to this number?
Is there a mathematical calculation equation that’s done?
min-width: 40%;
And is it always that, does it ever change?
The one you did had:
max-width: 500px;
min-width: 40%;
.video-wrapper {
min-width: 40%;
max-width: 560px;
margin: auto;
}
Easier to understand when edited in a fullscreen
http://htmledit.squarefree.com/
min-width: 40%;
max-width: 560px;
means
560 x 315
min-width: 40%;
max-width: 500px;
means
512 x 288
I can’t remember where that came from and was probably focused on its original concept.
As usual values will rely on the task in hand and what needs to be achieved. The problem with using min-width:40% when the page is very wide is that the min-width may then be wider than the max-width and the max-width will be ignored. This may indeed be what you wanted but without full context it may be that you don’t want it bigger than 560px in which case the min-width would need to be changed to perhaps a px width.
It all depends 
min-width: 40%;
is equal to max-width: 560px;
Which is what it should be.
It shouldn’t get bigger than 560px.
What happens if 40% works out to be, say, 600px?
The rules would be saying “don’t be less than 600px” and at the same time “don’t be more than 560px”. Obviously it can’t be both.
I don’t know what might happen in that situation, but it is something you should keep in mind.
What if I just removed: min-width: 40%;
Do I really need it?
Not in the example you linked to.
This is all that’s needed then?
.video-wrapper {
max-width: 560px;
margin: auto;
}
If it’s not needed in this example:
In what case would min-width: 40%;
be needed or necessary?
If perhaps someones monitor was very wide say 3000px plus and you wanted the element to take up at least 40% of the screen rather than the 560px you set which would look a bit lost on a very large screen
This one has me stumped:
1.) Looking at how this code is set up
2.) This code is set up differently:
How would I change the border color of 2.) after it’s clicked?
I wanted to use this on 2.) but I don’t think it’s possible.
or I’m just not setting it up the right way.
<div class="jacketc">
<div class="wrapg hide">
.wrapg {
position: relative;
width: 606px;
height: 344px;
margin-top: 45px;
cursor: pointer;
overflow: hidden;
border-radius: 25px;
border: 3px solid red;
box-sizing: border-box;
}
.hide {
display: none;
}
(function iife() {
"use strict";
const show = (el) => el.classList.remove("hide");
const hide = (el) => el.classList.add("hide");
function coverClickHandler(evt) {
const cover = evt.currentTarget;
const thewrap = cover.parentNode.querySelector(".wrapg");
hide(cover);
show(thewrap);
}
const cover = document.querySelector(".jacketc");
cover.addEventListener("click", coverClickHandler);
}());
The container has no actions applied to it so the border won;t change. You would need to use JS to add a class to the container when the youtube is clicked and then use that class to color the border. This is more of a JS question than a CSS one.
.container.highlight{border-color:red;}
Then change the js so that the container is clicked and that allows you to add a class to it.
(function iife() {
"use strict";
let theContainer = document.querySelector('.container');
let youtube = document.querySelector('.youtube');
let thumbnail = `https://i.imgur.com/AJDZEOX.jpg`;
let image = new Image();
image.src = thumbnail;
image.addEventListener('load', function() {
youtube.appendChild(image);
});
theContainer.addEventListener('click', function() {
let iframe = document.createElement('iframe');
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('src', `https://www.youtube-nocookie.com/embed/M7lc1UVf-VE?rel=0&autoplay=1&controls=1&iv_load_policy=3&cc_load_policy=0&fs=0&disablekb=1&enablejsapi=1`);
youtube.innerHTML = '';
youtube.appendChild(iframe);
this.classList.add("highlight");
});
}());
Bear in mind my JS is basic.
This is the transition code:
How would I add it to this code?
This was my attempt, I wasn’t able to figure it out:
https://jsfiddle.net/zb6mkug3/712/
(function iife() {
"use strict";
const hide = (el) => el.classList.add("hide");
function coverClickHandler(evt) {
const cover = evt.currentTarget;
const thewrap = cover.parentNode.querySelector(".wrapg");
hide(cover);
}
const cover = document.querySelector(".jacketc");
cover.addEventListener("click", coverClickHandler);
}());
We’ve done this one before also. (many times)
You can’t transition an element that was previously display:none because there is no to or from state that will create an transition. You would need to hide the item off-screen rather than display:none and then you can transition the border and opacity as required.
e.g.
.wrapg {
position: relative;
width: 606px;
height: 344px;
margin-top: 45px;
cursor: pointer;
overflow: hidden;
border-radius: 25px;
border: 3px solid red;
box-sizing: border-box;
background: #000000;
transition:opacity 1s ease, border 1s ease;
}
.wrapg.hide{
display:block;
position:absolute;
left:-999em;
top:-999em;
opacity:1;
border: 3px solid #0059dd;
}
.hide{display:none}
How would I add the transition to the lines?
What am I forgetting to do?
or am I supposed to add something else to it?
I can’t figure this one out.
This didn’t work:
.wrapg.hide .lines::before,
.wrapg.hide .lines::after {
content: "";
position: absolute;
top: 0;
left: 198px;
width: 3px;
height: 100%;
background: red;
transition:opacity 3s ease, border 3s ease;
}
.wrapg .lines::after {
left: 399px;
}
This didn’t work either.
.wrapg .lines.hide::before,
.wrapg .lines.hide::after {
content: "";
position: absolute;
top: 0;
left: 198px;
width: 3px;
height: 100%;
background: red;
transition:opacity 3s ease, border 3s ease;
}
.wrapg .lines::after {
left: 399px;
}
I tried this:
.wrapg.hide .lines::before,
.wrapg.hide .lines::after {
content: "";
display: block;
position: absolute;
left: -999em;
top: -999em;
width: 3px;
height: 100%;
opacity: 1;
background: red;
}
.wrapg .lines::after {
left: 399px;
}
.wrapg .lines::before,
.wrapg .lines::after {
content: "";
position: absolute;
top: 0;
left: 198px;
width: 3px;
height: 100%;
background: red;
transition: opacity 3s ease, border 3s ease;
}
.wrapg .lines::after {
left: 399px;
}
Same answer different properties.
e.g.
.wrapg .lines::before,
.wrapg .lines::after {
content: "";
position: absolute;
top:0;
left:198px;
width: 3px;
height: 100%;
background: red;
opacity:1;
transition:opacity 3s ease, background 3s ease;
}
.wrapg .lines::after {
left: 399px;
}
.wrapg.hide .lines::before,
.wrapg.hide .lines::after {
top: -999em;
left:-999em;
background: red;
opacity:0;
transition:opacity 3s ease, background 3s ease;
}
If I wanted to keep cursor:pointer without changing after it’s clicked, how would I do that?
I tried this:
I’m wondering what would work.
.jacketc ::before,
.wrapg ::after {
content: "";
cursor: pointer;
}
I tried this:
div:hover {
cursor: pointer;
}
The only time the cursor never changes is when it’s on the border.
If I wanted to change the line color on load, what style property would I target to do that?
function changeLineColor(playerStatus) {
let color;
if (playerStatus === 1) {
color = "green";
}
if (color) {
document.querySelector(".wrapg .lines").style.backgroundColor = color;
}
}
I did this one right:
function changeBorderColor(playerStatus) {
let color;
if (playerStatus === 1) {
color = "yellow";
}
if (color) {
document.querySelector(".wrapg.border").style.borderColor = color;
}
}
It changes to cursor:pointer once the iframe has loaded. I don’t think you will be able to keep the cursor the same while its loading because obviously it can’t be clicked until its finished loading unless you shim something over the top like the lines.
e.g.
.wrapg.hide .lines{
right:0;
bottom:0;
width:100%;
height:100%;
background:rgba(255,255,255, 0.5);
}
.wrapg .lines{
position:absolute;
left:0;
top:0;
width:0;
height:0;
background:rgba(255,255,255, 0.0);
transition:background 1s ease, width 0s 1s,height 0s 1s;
}
The cursor will still flick on and off but very quickly.
Works perfectly in firefox, not Chrome.