YouTube Iframe嵌入代码不能很好地与IE / Edge [英] Youtube Iframe embed code not working well with IE/Edge

查看：1076
本文介绍了YouTube Iframe嵌入代码不能很好地与IE / Edge的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在此网站上有一个交互式图片地图，其工作原理如下：
当用户在图像上的6个点中的一个点上，该点将扩展成一个框，其中可以找到嵌入的YouTube视频。这在所有浏览器工作良好，除了IE /边缘。使用IE时，点不能正常或平滑地展开，并且非常毛刺。

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'.

我知道这是iframes，只包含了iframe中的6个点中的3个，而且这三个在IE上无法正常工作。

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.

我试图在iframe上浮动，没有运气。

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

干杯。

编辑：
不在任何浏览器中显示是因为他们目前在YouTube上的私人。这是没有问题，非私人视频的工作除了IE的一切。只是一个注释，但原来的问题仍然存在。 问题是点的扩展是不光滑的，有时甚至不工作（由于IE不同意I帧（由于某种原因）。

更新：
仍然试图找出解决方案，任何帮助，我会非常感谢！

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

交互式图片的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>


推荐答案

我也面临着同样的问题， googling我发现以下解决方案，这是工作正常在我的情况。当您要嵌入来自youtube的任何视频时，请按照以下步骤生成不同的链接。

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.

Enable privacy-enhanced mode

这将为您生成一个新的网址，可以使用edge和所有其他浏览器。

This will generate a new url for you which will work with edge and all other browsers.

这篇关于YouTube Iframe嵌入代码不能很好地与IE / Edge的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆