Youtube Iframe embed code not working well with IE/Edge

问题

I have an interactive image map on this site that works like this: When a user hovers over one of the 6 points on the image, the point will expand into a box, where an embedded youtube video can be found. This is working well in all browsers except IE/edge. With IE, the point doesn't expand properly or smoothly and is very 'glitchy'.

I know it's the Iframes that's messing it up because I've only included Iframes for 3 of the 6 points, and the three without work well on IE.

Is there anything I can do to stop IE behaving this way?

I've attempted to float right on the iframe's, with no luck.

Cheers.

Edit: The reason why the videos aren't showing in any browser is because they're currently on private on youtube itself. That's no issue, non-private videos work on everything except IE. Just a note, but the original problem persists. The problem is the expanding of the points is not smooth at all and sometimes doesn't even work (Due to the IE disagreeing with the Iframes (for some reason).

Update: Still trying to figure out the solution, any help and I would be very grateful!

HTML and CSS for the interactive image:

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  {
  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: 600;
  color: #e5e5e5;
}

a {
  -webkit-transition: color 0.25s ease-in-out;
  transition: color 0.25s ease-in-out;

}

#content a:link { color: #3cbeff;
font-weight: 420;
text-decoration: underline;}
#content a:visited { color: #3cbeff; 
font-weight: 420;
text-decoration: underline;} 
#content a:hover   { color: #0077ee;}  /* user hovers     */
#content a:active  { color: #0077ee;}  /* active links    */
}

.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: 725px;
  padding: 0px;
  box-sizing: border-box;
  margin: 0 auto;
  text-align: center;
}
.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;
  text-align: center;
  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%;
  text-align: center;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  overflow: overlay;

}
.distribution-map .map-point:active, .distribution-map .map-point:focus, .distribution-map .map-point:hover {
 position: absolute;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  width: 400px;
  height: 360px;
  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, .distribution-map .map-point:hover .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; 
  float: right;
  display:inline-block!important;
  text-align: center;
}
.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;
}
      </style>
 <body>
<h1></h1>
<div class="distribution-map">
<img src="https://static1.squarespace.com/static/56b6eced3c44d81bd1aa7ac5/t/56f6496817110775128b832f/1458981438644/Homephoto12.png?format=1000w">

    <div class="map-point" style="top:22%;left:21%">
        <div class="content">
          <!--<span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>x</span>-->
            <div class="centered-y">
              <h2>Walnuts</h2>
                <p>Watch the video and check the library!<br><br>
              <iframe width="350" height="197" src="https://www.youtube.com/watch?v=1KyvkclOZ9U" frameborder="0" allowfullscreen></iframe>
                 <!-- <strong>Check out:</strong> <br>
              <a href="http://www.thehealthytray.com/">This post covering more information, recipies and where you can get Walnuts</a>--></p>
            </div>
        </div>
    </div>
    <div class="map-point" style="top:23.5%;left:53%">
        <div class="content">
            <div class="centered-y">
             <center><h2>Maca Powder</h2>
                <p>Watch the video and check the library!</p>
             <iframe width="350" height="197" src="https://www.youtube.com/watch?v=eIxDXncGUbo" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>
    </div>
   <div class="map-point" style="top:26%;left:86%">
        <div class="content">
            <div class="centered-y">
                <h2>Chia Seeds</h2>
                <p>Watch the video and check the library!</p>
                  <iframe width="350" height="197" src="https://www.youtube.com/watch?v=_eTdjL9sRtE" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>
    </div>
    <div class="map-point" style="top:72%;left:19%">
        <div class="content">
            <div class="centered-y">
                <h2>Quinoa</h2>
                <p>Video and post date release date: Wednesday the 13th of April</p>
            </div>
        </div>
    </div>
    <div class="map-point" style="top:70%;left:51%">
        <div class="content">
            <div class="centered-y">
                <h2>Goji berries</h2>
                <p>Video and post date release date: Thursday the 14th of April</p>
            </div>
        </div>
    </div>
     <div class="map-point" style="top:71.5%;left:86.5%">
        <div class="content">
            <div class="centered-y">
                <h2>Onion</h2>
                <p>Video and post date release date: Friday the 15th of April</p>
            </div>
        </div>
    </div>
</div>

回答1:

There are known issues using Edge with YouTube content, and other media content. Users need to set 'Use Software rendering instead of GPU rendering' in their browser settings. Google the issue for more info.

Hope this helps?

回答2:

I am also facing the same issue in my website after googling i found the following solution which is working fine in my case. When you are going to embed any video from youtube generate a different link by following the steps below.

In enbed block click on "Show more" which will show different options with the video, just check the last option in the queue if it is not checked.