使 iframe 中的 iframe 和视频具有响应性答案

【问题标题】：Make iframe and video in iframe responsive使 iframe 中的 iframe 和视频具有响应性
【发布时间】：2017-01-01 01:16:48
【问题描述】：

我使用 PlusThis 进行视频跟踪，以下代码在查看网站的桌面版本时运行良好，但是，当我使用移动设备时，视频显然没有响应。

为了使用 PlusThis 功能，我需要使用下面的代码，但我不知道如何让它响应：

<iframe id="vimeo_187396498" src="https://player.vimeo.com/video/187388888" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<script type="text/javascript">
    PTFeatureBase.setContactId('[memb_contact fields="Id"]');
    PTFeatureBase.setContactEmail('[memb_contact fields="Email"]');
    PTVideoTriggers.listen({
        type: "vimeo",
        playerId: "vimeo_187399998",
        feature: "1545-MHe1qQxtRTKCd4cTdB5aDcedYjgJORyfcidK6gv1",
        triggerType: "cue",
        times: [660]
    });
</script>

有人可以告诉我如何使这段代码具有响应性，同时仍然保持我需要的 JavaScript 完整，以便使用 PlusThis 的功能吗？

【问题讨论】：

标签： css iframe responsive

【解决方案1】：

PTFeatureBase.setContactId('[memb_contact fields="Id"]');
   PTFeatureBase.setContactEmail('[memb_contact fields="Email"]');
   PTVideoTriggers.listen({
     type: "vimeo",
     playerId: "vimeo_187399998",
     feature: "1545-MHe1qQxtRTKCd4cTdB5aDcedYjgJORyfcidK6gv1",
     triggerType: "cue",
     times: [660]
   });

iframe{
  width:100%;
  height:auto;
 }

&lt;iframe id="vimeo_187396498" src="https://player.vimeo.com/video/187388888" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt;

【讨论】：

【解决方案2】：

<iframe id="vimeo_187396498" src="https://player.vimeo.com/video/187388888" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

您在 iframe 标记内使用了宽度和高度。因此，请将该 iframe 标记放在 div 区域中，并将 css iframe 用作 div 子级。请按照以下示例进行操作： HTML 代码：

<div class="videoiframe">
<iframe id="vimeo_187396498" src="https://player.vimeo.com/video/187388888" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

CSS 代码：

.videoiframe iframe {width:100%; height: auto}

我希望，你明白了。

【讨论】：