How much of this code can be put into CSS and how would I do it?

HTML & CSS
41

You made the video disappear after you click on it.

42

This method works too. Still blank after you click on it.

.overlay {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    cursor:pointer;
    background-color:black;
    border-radius:50px;
    border:5px solid #5CB378;
    background-image:url('https://i.imgur.com/bQGFmLZ.png');
    z-index:1;


   <img class="overlay" >
43

It’s just slightly invalid.

If you take everything out of the fiddle that I just gave you, does the video play? It does not for me, which suggests that something else is wrong, not the test code that I gave you.

44

Look I just did this,

It resizes but it’s not perfect.

45

Without this code clicking on it won’t make it start.

               <div style="width:650px;display:block;" onclick="thevid=document.getElementById('thevideo');
thevid.style.display='block'; this.style.display='none';
document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');">

<img class="overlay" >

        <div id="thevideo" style="display: none;">
46

How would I make it valid if it’s slightly invalid?

47

Replace <img class="overlay"> with <div class="overlay"></div> and see if that works or not.

48

It works, but it’s still blank after you click on it.

This would be the valid code though?
<div class="overlay"></div>

49

I realise this has moved too far for me to butt in but here;s how I would do it.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
	height: 100%;
	background: #000;
	color:#fff;
	padding: 0;
	margin: 0;
}
.outer {
	display: table;
	height: 100%;
	margin: 0 auto;
	width:100%;
}
.tcell {
	display: table-cell;
	vertical-align: middle;
}
.wrap {
	max-width:640px;
	position:relative;
	margin:auto;
	border: 10px solid #5CB378;
	border-radius:10px;
}
.inner {
	position:relative;
	height:0;
	padding-bottom:56%;
	cursor: pointer;
	background-color: black;
}
#thevideo, .image {
	position:absolute;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	height:100%;
	width:100%;
	background-color:#000000;
	cursor: pointer;
}
#thevideo iframe, .image img {
	width:100%;
	height:100%
}
</style>
</head>

<body>
<div class='outer'>
  <div class='tcell'>
    <div class="wrap">
      <div class="inner">
        <div class="image" onclick="thevid=document.getElementById('thevideo');
thevid.style.display='block'; this.style.display='none';
document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');"> <img src="https://i.imgur.com/bQGFmLZ.png" ></div>
        <div id="thevideo" style="display: none;">
          <iframe  id="iframe" src="https://www.youtube.com/embed/Hj_91ntoi50?rel=0&disablekb=1&amp;vq=medium&amp;showinfo=0&controls=1&amp;autoplay=0&iv_load_policy=3&fs=0&amp;wmode=transparent"></iframe>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

The iframe will resize but I kept the max-width which can be changed or removed as required.

You can’t really round the corners of a player in an iframe unless you put it underneath a rounded element or add corners on top of it.

1 Like
50

How come the corners are rounded here?

Is there any way to do rounded corners with your code?

51

I din’t see any rounded corners on the player. Indeed I see no player in your fiddle?

52

Here you go:
http://testpage34567.blogspot.com/

Now do you see?

53

That is an image with round corners, not an iframe or video player.

54

Yes i see exactly as I stated that in Chrome there are no rounded corners on the player and they stick out of the iframe corners.

844×446 29.2 KB

3 Likes
55

It looks naff!

56

I won’t uses rounded corners then. Thank you for showing me that.

I want to add this to CSS, how would I do it?
<img src="https://i.imgur.com/bQGFmLZ.png"></div>

Using this: Class, and where do I put it?
<img class="overlay"> or <div class="overlay">


background-image:url('https://i.imgur.com/bQGFmLZ.png');
57

You want to use that image as a background image?

58

Yes.

59

That just seems to be a blue background and Ron has given you the overlay code for it already. In my example you could just set the div itself to blue.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
	height: 100%;
	background: #000;
	color:#fff;
	padding: 0;
	margin: 0;
}
.outer {
	display: table;
	height: 100%;
	margin: 0 auto;
	width:100%;
}
.tcell {
	display: table-cell;
	vertical-align: middle;
}
.wrap {
	max-width:640px;
	position:relative;
	margin:auto;
	border: 10px solid #5CB378;
	border-radius:10px;
}
.inner {
	position:relative;
	height:0;
	padding-bottom:56%;
	cursor: pointer;
	background-color: black;
}
#thevideo, .image {
	position:absolute;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	height:100%;
	width:100%;
	background-color:#000000;
	cursor: pointer;
	overflow:hidden;
}
#thevideo iframe {
	width:100%;
	height:100%
}
.image {background:blue}
</style>
</head>

<body>
<div class='outer'>
  <div class='tcell'>
    <div class="wrap">
      <div class="inner">
        <div class="image" onclick="thevid=document.getElementById('thevideo');
thevid.style.display='block'; this.style.display='none';
document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');"> </div>
        <div id="thevideo" style="display: none;">
          <iframe  id="iframe" src="https://www.youtube.com/embed/Hj_91ntoi50?rel=0&disablekb=1&amp;vq=medium&amp;showinfo=0&controls=1&amp;autoplay=0&iv_load_policy=3&fs=0&amp;wmode=transparent"></iframe>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Or if it really is an image then just use a background image and background-size:cover instead of ‘blue’.

2 Likes
60

I want to use this cause I’m going to change it.
background-image:url('https://i.imgur.com/bQGFmLZ.png');