0
У меня есть карта интерактивного изображения на этом site, которая работает следующим образом: Когда пользователь наводится на одну из 6 точек на изображении, точка будет расширяться в поле , где можно найти встроенное видео с YouTube. Это хорошо работает во всех браузерах, кроме IE/edge. С IE точка не расширяется должным образом или плавно и очень «глючная».Youtube Встраиваемый код iframe не работает с IE/Edge
Я знаю, что это фреймы, которые испортили его, потому что я включил только Iframes для 3 из 6 пунктов, а три без работы хорошо работают в IE.
Есть ли что-нибудь, что я могу сделать, чтобы остановить поведение IE таким образом?
Я попытался плавать прямо на iframe, без везения.
Cheers.
Редактировать: Причина, по которой видео не отображается в любом браузере, состоит в том, что они в настоящее время находятся на привате непосредственно на youtube. Это не проблема, не-частные видео работают на всех, кроме IE. Просто примечание, но исходная проблема сохраняется. Проблема заключается в обогащении точек не является гладкой на всех, и иногда даже не работает (В связи с IE не соглашаясь с Iframes (по некоторым причинам)
Обновление:. все еще пытаюсь понять из решения, любая помощь, и я был бы очень благодарен
HTML и CSS для интерактивного изображения:
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>