0
Ich habe eine interaktive Imagemap auf diese site, die wie folgt funktioniert: Wenn ein Benutzer über einen der 6 Punkte auf dem Bild schwebt, wird der Punkt in eine Box erweitern , wo ein eingebettetes YouTube-Video gefunden werden kann. Dies funktioniert in allen Browsern mit Ausnahme von IE/Edge. Mit IE erweitert sich der Punkt nicht richtig oder reibungslos und ist sehr "glitchy".Youtube Iframe Embed Code funktioniert nicht gut mit IE/Edge
Ich weiß, dass es die Iframes sind, die es vermasseln, weil ich nur Iframes für 3 der 6 Punkte und die drei ohne Arbeit gut auf IE eingeschlossen habe.
Gibt es etwas, was ich tun kann, damit IE sich nicht so benimmt?
Ich habe versucht, direkt auf dem Iframe zu schweben, ohne Glück.
Prost.
Edit: Der Grund, warum die Videos nicht in jedem Browser zeigen, weil sie zur Zeit auf youtube auf Privat sind selbst. Das ist kein Problem, nicht-private Videos funktionieren mit Ausnahme von IE. Nur eine Anmerkung, aber das ursprüngliche Problem besteht weiter. Das Problem ist, das sich ausdehnende der Punkte ist nicht glatt und manchmal nicht funktioniert auch (wegen der IE mit dem Iframes nicht zustimmen (aus irgendeinem Grund)
Update:. noch zu Figur versuchen aus der Lösung, jede Hilfe, und ich wäre sehr dankbar,
HTML und CSS für das interaktive Bild:
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>