Keeping the expanded box open when a video is played

Question

I have an image map that has various points which when clicked, enlarge into boxes. When you click outside the box the enlarged box closes back into it's original point.

See this fiddle

Unfortunately, when I embed a video using IFrame and click play on the video, it closes the enlarged box like I have clicked outside the box.

I believe this is because it removes the focus away from .mappoint and takes it to IFrame.

My current system is using HTML and CSS only, but I'm happy to expand, I just have very little knowledge in jQuery etc.

I'm properly stuck, what I would like is for the enlarged box to remain enlarged when I the video is played and paused. Do you guys know of a solution to my problem?

html 
  color: #e5e5e5;
  text-align: center;
  font-family: "Roboto", Helvetica, sans-serif;
}

body {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 100px;
  overflow-x: hidden;
}

.description {
  max-width: 600px;
  margin: 0 auto;
  color: rgba(229, 229, 229, 0.7);
}

div,
img,
footer {
  position: relative;
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 20px;
  text-transform: uppercase;
  font-family: "Roboto Condensed", Helvetica, sans-serif;
  font-weight: 300;
}

h1 {
  font-size: 36pt;
}

h2 {
  font-size: 24pt;
}

h3 {
  font-size: 18pt;
}

h4 {
  font-size: 16pt;
}

h5 {
  font-size: 14pt;
}

h6 {
  font-size: 12pt;
}

p {
  font-size: 12pt;
  margin-bottom: 12pt;
  margin-right: 12px;
  margin-left: 12px;
}

strong {
  font-weight: 900;
  font-family: "Roboto Condensed", Helvetica, sans-serif;
  color: #e5e5e5;
}

a {
  -webkit-transition: color 0.25s ease-in-out;
  transition: color 0.25s ease-in-out;
  font-family: "Roboto Condensed", Helvetica, sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  color: #dff3fd;
}

a:visited {
  color: #dff3fd;
}

li.active a,
a:hover,
a:active {
  color: #e5e5e5;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.centered-y {
  position: inline-block;
  width: auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.distribution-map {
  position: relative;
  width: 1190px;
  padding: 20px;
  box-sizing: border-box;
  margin: 0 auto;
}

.distribution-map > img {
  width: 100%;
  position: relative;
  margin: 0;
  padding: 0;
}

.distribution-map .map-point {
  cursor: pointer;
  outline: none;
  z-index: 0;
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -moz-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
  -o-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
  -webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, z-index 0.25s ease-in-out;
  -webkit-transition-delay: 0.25s, 0.25s, 0.25s, 0.25s;
  -webkit-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
  transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
  background: rgba(26, 26, 26, 0.85);
  border: 3px solid #dff3fd;
}

.distribution-map .map-point .content {
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
  width: 100%;
  height: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  overflow: overlay;
}

.distribution-map .map-point:active,
.distribution-map .map-point:focus {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  width: 550px;
  height: 400px;
  color: #e5e5e5;
  z-index: 1;
  -webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
}

.distribution-map .map-point:active .content,
.distribution-map .map-point:focus .content {
  filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  -moz-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
  -o-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
  -webkit-transition: opacity 0.25s ease-in-out, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
  -webkit-transition-delay: 0.25s, 0s, 0s;
  -webkit-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
  overflow: hidden;
}

.distribution-map .map-point:active .content a:hover,
.distribution-map .map-point:active .content a:active,
.distribution-map .map-point:focus .content a:hover,
.distribution-map .map-point:focus .content a:active {
  color: #dff3fd;
}

<body>
  <h1></h1>
  <div class="distribution-map">


    <button class="map-point" style="top:24%;left:26.5%">
      <div class="content">
        <div class="centered-y">
          <h2>Another</h2>
          <p>details</p>
          <iframe width="350" height="197" src="https://www.youtube.com/embed/5MgBikgcWnY" frameborder="0" allowfullscreen></iframe>
        </div>
      </div>
    </button>
    <button class="map-point" style="top:26%;left:49%">
      <div class="content">
        <div class="centered-y">
          <h2>Another</h2>
          <p>Details...</p>
        </div>
      </div>
    </button>
    <button class="map-point" style="top:27.3%;left:71.4%">
      <div class="content">
        <div class="centered-y">
          <h2>Another</h2>
          <p>Details...</p>
        </div>
      </div>
    </button>
    <button class="map-point" style="top:63.5%;left:31.5%">
      <div class="content">
        <div class="centered-y">
          <h2>Another one</h2>
          <p>Details...</p>
        </div>
      </div>
    </button>
    <button class="map-point" style="top:65%;left:56%">
      <div class="content">
        <div class="centered-y">
          <h2>another one</h2>
          <p>Details...</p>
        </div>
      </div>
    </button>
    <button class="map-point" style="top:68%;left:74%">
      <div class="content">
        <div class="centered-y">
          <h2>Another</h2>
          <p>Details...</p>
        </div>
      </div>
    </button>
  </div>

Any help would be appreciated, cheers.

score 1 · Accepted Answer · edited May 23 '17 at 12:02

In the attempt to fix your JSFiddle, I inquired the solutions from this question:

Is it possible to focus on a div using javascript focus function - Stack Overflow

For reference, I'll go through everything I tried on your fiddle:

I tried adding an onclick="this.parentNode(x3).focus()" on your iframe, so that the map-point button would still retain its focus, therefore retain its CSS :focus selector.
Along with the above, I tried adding tabindex="0" to your map-point button, per the highest voted answer in the link above. Unfortunately, iframe focus overrules tabindex.
I tried using document.getElementById('bad-map-point').scrollIntoView() from the next highest voted answer, with no success.
I tried using a .manualfocus classname in the fiddle along with ugly JS, but I messed up the CSS more than I fixed it, so I reverted that.

And then, I found one, nice, tidy, working solution!

I added hover selectors on your map-points, and it works with the iframe!

Changes:

.distribution-map .map-point:active,
.distribution-map .map-point:focus,
.distribution-map .map-point:hover { //Added :hover

  ...
}

And:

.distribution-map .map-point:active .content,
.distribution-map .map-point:focus .content,
.distribution-map .map-point:hover .content { //Added :hover

  ...
}

It's elegant, runs smoothly, and no JavaScript!

Hope this helps!

This helps a ton! Can't thank you enough Aaron! It works with iframe now, and it also looks better with the hover feature haha! Thanks for all your hard work, I would never think to add hover! Cheers:D — Joe, Mar 31 '16 at 08:46

Keeping the expanded box open when a video is played

1 Answers1