Can't click elements in my 'content' div

javascript html css video

11,653

Solution 1

Your <body class="background"> is covering the .content div because you have z-index: -1; on the content class in your css file. You should be safe to just remove it, if not then change it to 1 and add z-index: 2; to your .menubar class.

You can see this in either Firefox or Chrome by using developer tools Inspect Element to see the layout of the page as it is rendered in the browser.

Firefox Inspect Element

Chrome Inspect Element

EDIT:

After playing around for a while I found a solution. The z-index has some relation that I don't completely understand with whether the position is static or relative/absolute. So after experimentation I was able to get the menu to work properly by adding position: relative; to the .menubar class.

Solution 2

Your class specified here:

<div class="content">

is giving you this problem, maybe will conflict with an other same class name defined else where.

If I change this class name then your video works (just for testing purpose I have renamed to contents:

<div class="contents">

Check the diddle here:

https://jsfiddle.net/te8sxvgq/

11,653

Author by

Nicholas Johnson

Updated on June 04, 2022

Comments

Nicholas Johnson almost 2 years

I have some text and a YouTube video on my website (aka: http://redstonegaming.com), and it won't let me start the video. Any help would be greatly appreciated. Also, when I set the content div to z-index: 99, it works but my dropdown menu goes under the content. Vice versa.

var rick = false;
var audio = new Audio('rick_roll.mp3');
var kkeys = [],
  konami = "38,38,40,40,37,39,37,39,66,65,13";
$(document).keydown(function(e) {
  kkeys.push(e.keyCode);
  if (kkeys.toString().indexOf(konami) >= 0) {
    kkeys = []; // <-- Change here
    if (rick == false) {
      rick = true;
      audio.play();
    } else if (rick == true) {
      rick = false;
      audio.pause(); // <-- another issue
    }
  }
});

/*Some Fonts Here:*/
@font-face { font-family: Rusty; src: url('BrushScriptStd.otf');}
* {
	font-family: Rusty;
	font-weight: Lighter;
}
.background
{
	background-image: url(0.jpg);
	background-attachment: fixed;
	background-size: 100% auto;
	background-color: f7f7f7;
	background-repeat: no-repeat;
	background-position:absolute;
}
.menubar {
  height: 2.8vw;
  opacity: 0.85;
  background-color: #CCCCCC;
}
.clearfix:after {
  display: block;
  clear: both;
}
.menu-wrap {
  width: 50%;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
  background: #3e3436;
}
.menu {
  width: 100%;
  margin: 0px auto;
  text-align: center;
}
.menu li {
  margin: 0px;
  list-style: none;
  font-family: 'Ek Mukta';
}
.menu a {
  transition: all linear 0.15s;
  color: #919191;
}
.menu li:hover > a,
.menu .current-item > a {
  text-decoration: none;
  color: rgba(189, 34, 34, 1);
}
.menu .arrow {
  font-size: 0.95vw;
  line-height: 0%;
}
.menu > ul > li {
  float: middle;
  display: inline-block;
  position: relative;
  font-size: 1.2vw;
}
.menu > ul > li > a {
  padding: 0.7vw 5vh;
  display: inline-block;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
  background: #2e2728;
}
.menu li:hover .sub-menu {
  display: block;
  z-index: 99;
}
.sub-menu {
  width: 100%;
  padding: 0px 0px;
  position: absolute;
  top: 100%;
  left: 0px;
  display: none;
  transition: opacity linear 5.8s;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
  background: #2e2728;
}
.sub-menu li {
  display: block;
  font-size: 1.2vw;
}
.sub-menu li a {
  padding: 10px 10px;
  display: block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
  background: #3e3436;
}
.Rusty 
{
	font-family: "Rusty";
	color: rgba(189, 34, 34, 1);
}
.content
{
	opacity: .85;
	position: relative;
	margin: auto;
    width: 80%;
	z-index: -1; 
    background-color: #CCCCCC;
    padding: 10px;
	height: 100%;
}
.menu > ul > .login 
{
    position: absolute;
    top: 0;
    right: 0;
}
.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	width: 100%;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:15;
	left:15%;
	right:15%;
	width: 25vw;
	height:25vh;
}
.title
{
	text-align: center;
	font-size: 7vh;
	text-decoration: underline;
	-moz-text-decoration-color: inherit;
    text-decoration-color: inherit;
}
.feed-column
{
	width: 50%;
}
.text-center
{
	text-align: center;
}

<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://s.ytimg.com/yts/cssbin/www-subscribe-widget-webp-vflj9zwo0.css"
    name="www-subscribe-widget" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="script.js"></script>
    <link rel="shortcut icon" href="favicon.ico" />
    <title>RG - Home</title>
  </head>
  <body class="background">
    <div class="menubar">
      <nav class="menu">
        <ul class="clearfix">
          <li>
            <a href="aboutme.html">About Me 
            <span class="arrow">▼</span></a>
            <ul class="sub-menu">
              <li>
                <a href="#">Gaming</a>
              </li>
              <li>
                <a href="#">Programming</a>
              </li>
              <li>
                <a href="#">YouTube</a>
              </li>
              <li>
                <a href="#">Other</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="schedule.html">Schedule</a>
          </li>
          <li class="current-item">
            <a href="#">
              <p class="rusty">RedstoneGaming</p>
            </a>
          </li>
          <li>
            <a href="equipment.html">Equipment</a>
          </li>
          <li>
            <a href="contact.html">Contact Me</a>
          </li>
          <li class="login">
            <a href="login.html">Login/Sign Up</a>
          </li>
        </ul>
      </nav>
    </div>
    <div class="content">
      <h1 class="rusty title">ThatRedstoneGuy&#39;s Feed</h1>
      <div class="feed-column">
        <h1 style="font-size: 3vh;" class="rusty text-center">Colortone | Am I colorblind?! | W/Voiceless</h1>
        <div class="video-container">
          <iframe src="https://www.youtube.com/embed/-egJP-2ShRk?controls=2%20align="></iframe>
        </div>
      </div>
      <div class="feed-column">
	  </div>
    </div>
  </body>
</html>