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

What I want to know is how much of the below code can I put inside the CSS and how would I do it?

Working Code:

<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" width="256" height="256" src="https://www.youtube.com/embed/?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>

This is the rest of the code:


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;
}

-----------------------------

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

---Code inside-----

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

I’m up to, how do I add this part to the CSS? I did the other half. The lower part of the code.


<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>

Something like this?

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

This is the code in the html part

Updated:

 <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');">

    <div id="thevideo">
      <iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/xq8K-lUuTv8?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">
      </iframe>
    </div>
  </div>
</div>

I’m trying to put this in the CSS part:

<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>

What is the purpose of that image, please? It seems to be nothing more than a blue rectangle.

Cover for the video. It would be any picture. You click on it and it plays.

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

Isn’t working with this code.

after I add it to this code

See here: outer and tcell not working.

It responds like this

You have a couple of topics open, which one do you want to work on next?

Is this code with the video in the iframe part of a framework or are you writing this from scratch?

FYI: I have to convert a fiddle to a working HTML page to work on it, so expect me to be slow.

It’s based off this code:

I found it here:

This code works here, but after adding in outer and tcell it doesn’t work.

<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');">

      <div id="thevideo">
        <iframe src="http://www.youtube.com/embed/?rel=0&amp;start=20&amp;disablekb=1&amp;vq=medium&amp;showinfo=0&amp;controls=1&amp;autoplay=0&amp;iv_load_policy=3&amp;fs=0&amp;wmode=transparent">
        </iframe>
      </div>
    </div>
html,
body {
  height: 100%;
  background: #000000;
  padding: 0;
}

.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%;
}

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

I still haven’t figured out how to get this into the css part of the code

<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>

About the full page width video…

I copied the code from
http://jsfiddle.net/JBhp2/

and deleted the max-width:480px from

.auto-resizable-iframe {
    max-width: 420px;  /* delete me */

. The demo now plays the vid at the full width of the page.

<!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">
.auto-resizable-iframe {
    margin:0px 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="auto-resizable-iframe">
    <div>
        <iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"></iframe>
    </div>
</div>

</body>
</html>

I didn’t want full page. only 640 width.

It works here:

The max-width of the outer box sets the max-width of the video. Replace max-width:480px with (max-width:640px;)

I want this code to work with tcell and outer.

Not for me. The vid does not play.

I don’t care about it not playing, I’m trying to add tcell and outer to it.

after I add tcell and outer to this code. the video doesn’t get smaller and larger.

It responds like this
http://jsfiddle.net/JBhp2/457/1

https://i.imgur.com/1DdXQvx.png

I’m trying to get this code to work with the above code.

.outer {
display:table;
height:100%;
margin:0 auto; 
}
.tcell {
display:table-cell;
vertical-align:middle;
}