Сделать iframe и видео в iframe отзывчивом

Question

Я использую 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?

Answer 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; 
 
}

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

Answer 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} 

Я надеюсь, вы его получили.