小编Yor*_*nto的帖子

我有网站原始页面构建器（Wordpress）的视频背景插件，并且我上传了背景视频（MP4 和 WEBM 格式）。文件大小分别约为 35mb 和 17mb。

我已经在几部运行最新 iOS 和 safari 的 iPhone 上进行了测试，视频没有像它应该的那样自动播放（只显示后备图像）。

视频代码：

<video id="so_bgvideo_5df3a8b601042" 
class="so_video_bg jquery-background-video is-playing is-visible" 
loop="" autoplay="" playsinline="" muted="" data-bgvideo="" 
poster="https://mywebsite.com/fallback-image.jpg" 
data-bgvideo-fade-in="500" data-bgvideo-pause-after="120" 
data-bgvideo-show-pause-play="true" 
data-bgvideo-pause-play-x-pos="right"
data-bgvideo-pause-play-y-pos="top" 
style="min-width: auto; min-height:auto; width: 100%; height: auto;
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
transition-duration: 500ms;">
<source src="https://mywebsite.com/video.mp4" type="video/mp4">
<source src="https://mywebsite.com/video.webm" type="video/webm">
</video>

据我所知，视频包含 Safari 所需的属性（并且在 Safari 桌面上播放良好）。

任何人都可以建议修复以使其在 Safari 移动设备上运行吗？

我有三个图像，悬停时它们使用 :hover 在 css 中增加大小。当用户将鼠标悬停在图像上时，我还希望出现带有图像描述的工具提示（我也应该能够定位工具提示）。

HTML

<div class="bottle-container">
<div class="click-to-top"><img src="image-1.png" alt="Image 1" />Tooltip text</div>
<div class="click-to-top" style="z-index:5;"><img src="image-2.png" alt="Image 2" /></div>
<div class="click-to-top last"><img src="image-3.png" alt="Image 3" /></div>
</div>

CSS

container{
max-width:600px;
margin:0 auto;
min-height:450px;
}

div.click-to-top {
display:inline-block;
position:relative;
max-width:160px;
}

div.click-to-top:hover{
z-index:10;
}

div.click-to-top img{
-webkit-transition: all 0.8s;
moz-transition: all 0.8s;
transition: all 0.8s;
width:130px;
}

div.click-to-top img:hover{
width:140px;
z-index:10;
}