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

HTML & CSS
21 
.outer {
    display:table;
    width:100%;  /* changed from height */
    margin:0 auto; 
}
22

I did that and it still doesn’t work:

the video doesn’t get smaller and larger.

23

Play this:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>template</title>
<!--

-->
    <style type="text/css">
html,body {
    width:100%;
    height:100%;
}
body {
    padding:0;
    margin:0;
}
.outer {
    display:table;
    width:100%;
    height:100%;
    margin:0 auto; 
}
.tcell {
    display:table-cell;
    vertical-align:middle;
}
.auto-resizable-iframe {
    max-width:640px;
    margin:auto;
}
.auto-resizable-iframe > div {
    position:relative;
    padding-bottom:75%;
    height:0px;
}
.auto-resizable-iframe iframe {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}
    </style>
</head>
<body>

<div class="outer">
    <div class="tcell">
        <div class="auto-resizable-iframe">
            <div>
                <iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"></iframe>
            </div>
        </div>
    </div>
</div>

</body>
</html>
24

Look:

<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 src="https://i.imgur.com/bQGFmLZ.png" style="width: 640px; height: 390px; cursor: pointer;background-color: black; border-radius:50px; border: 5px solid #5CB378;"/></div>


 <div id="thevideo">
            
                <ifr
25 
<div class="outer">
  <div class="tcell">
    <div class="auto-resizable-iframe">
      <div>


        <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 src="https://i.imgur.com/bQGFmLZ.png" style="width: 640px; height: 390px; cursor: pointer;background-color: black; border-radius:50px; border: 5px solid #5CB378;" /></div>


        <div id="thevideo">

          <iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

html,
body {
  width: 100%;
  height: 100%;
}

body {
  padding: 0;
  margin: 0;
}

.outer {
  display: table;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
}

.auto-resizable-iframe {
  max-width: 640px;
  margin: auto;
}

.auto-resizable-iframe > div {
  position: relative;
  padding-bottom: 75%;
  height: 0px;
}

.auto-resizable-iframe iframe {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

.auto-resizable-iframe iframe {
  border: 5px solid #5CB378;
  border-radius: 50px;
  cursor: pointer;
  background-color: #000000;
}
26

I’m trying to add this to the css:

<img src="https://i.imgur.com/bQGFmLZ.png" style="width: 640px; height: 390px; cursor: pointer;background-color: black; border-radius:50px; border: 5px solid #5CB378;" /></div>

27

i give up.

28

No you don’t. :lol:

That’s just a ruse.

Can you make the vid play? Under what conditions does the blue overlay appear?

1 Like
29

Under these conditions

Code:

<div class='outer'>
  <div class='tcell'>

    <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 src="https://i.imgur.com/bQGFmLZ.png" style="width: 640px; height: 390px; cursor: pointer;background-color: black; border-radius:50px; border: 5px solid #5CB378;" /></div>

    <div id="thevideo" style="display: none;">
      <iframe id="iframe" src="https://www.youtube.com/embed/Hj_91ntoi50?rel=0&amp;start=20&disablekb=1&amp;vq=medium&amp;showinfo=0&controls=1&amp;autoplay=0&iv_load_policy=3&fs=0&amp;wmode=transparent" style="width: 640px; height: 390px; background-color:#000000; cursor: pointer; border-radius:50px; border: 5px solid #5CB378;"></iframe>

    </div>
  </div>
</div>

html,
body {
  height: 100%;
  background: #000000;
  padding: 0;
  margin: 0;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
}
30

Are you showing that the overlay is supposed to be visible if the YouTube video cannot be found?

31

The video can be found. You click on it and it plays.

32

Now try and add this code to the rest of it.

.auto-resizable-iframe {
  max-width: 640px;
  margin: 0px auto;
}

.auto-resizable-iframe > div {
  position: relative;
  padding-bottom: 60.9375%;
  height: 0px;
}

.auto-resizable-iframe iframe {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

<div class="auto-resizable-iframe">
  <div>
33

Where are we at with this?

Has the question changed as Ron’s resizable code doesn’t seem to be used in the last fiddle.

Can you clarify the problem and what you want to happen?

34

I’m trying to add [.auto-resizable-iframe iframe] to the working code:

And I can’t get it to work properly.

35

When you say it doesn’t work properly, are you saying that it doesn’t resize at narrow widths? In other words, what does “work properly” mean?

36

Exactly that. Doesn’t shrink/ resize.

37

If my notes are correct, the overlay is not position:absolute like the iframe. Try giving the overlay the same position:absolute styles as the iframe. Something like this:

.overlay {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    cursor:pointer;
    background-color:black;
    border-radius:50px;
    border:5px solid #5CB378;
    z-index:1;
}

I don’t know if this will help or break something else, but it will make the blue overlay resize with the iframe. You may need to give the overlay z-index:1;

38

Here: I don’t know where I’m putting this: .overlay

<div class='outer'>
  <div class='tcell'>
    <div class="auto-resizable-iframe">
      <div>
        <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 src="https://i.imgur.com/bQGFmLZ.png" style="width: 640px; height: 390px; cursor: pointer;background-color: black; border-radius:50px; border: 5px solid #5CB378;" /></div>

        <div id="thevideo" style="display: none;">
          <iframe id="iframe" src="https://www.youtube.com/embed/Hj_91ntoi50?rel=0&amp;start=20&disablekb=1&amp;vq=medium&amp;showinfo=0&controls=1&amp;autoplay=0&iv_load_policy=3&fs=0&amp;wmode=transparent" style="width: 640px; height: 390px; background-color:#000000; cursor: pointer; border-radius:50px; border: 5px solid #5CB378;"></iframe>
 </div>
        </div>
      </div>
    </div>

html,
body {
  height: 100%;
  background: #000000;
  padding: 0;
  margin: 0;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
}

.auto-resizable-iframe {
  max-width: 640px;
  margin: 0px auto;
}

.auto-resizable-iframe > div {
  position: relative;
  padding-bottom: 60.9375%;
  height: 0px;
}

.auto-resizable-iframe iframe {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
39

It’s all messed up now.

40

Sorry, your confusion is my fault.

I assigned the className “overlay” to the blue image and did not mention it.

<img class="overlay" src="https://i.imgur.com/bQGFmLZ.png" width="640" height="390">

All of the inline styles were moved to that className.