如何使<iframe>在wordpress中響應。我只能在移動設備或桌面設備上進行響應。需要它在兩個工作都很好

我已經使用了下面的CSS和html來使iframe響應，但我只能設法修復它爲桌面或移動設備，請幫我解決這兩個問題。我會很感激你的幫助如何使<iframe>在wordpress中響應。我只能在移動設備或桌面設備上進行響應。需要它在兩個工作都很好

HTML 
<div class="schedule"><iframe src="http://pranamaya-yoga.com/calendar-2/action~month/exact_date~1477937700/cat_ids~156/request_format~json/" style=" border-width:0 " frameborder="no" scrolling="no"></iframe></div> 

CSS 
.schedule { 
    position: relative; 
    padding-bottom: 153%; 
    padding-top: 1441px; 
    height: 150%; 
    overflow: hidden; 
} 
.schedule iframe { 
    position: absolute; 
    top:-155px; 
    left: 0; 
    width: 100%; 
    height: 150%; 
}

來源

2016-11-28 Bikash Gyawali

對不起奔，我沒有太大的編碼器自己和學習，它來了，我使用WordPress的網站。我不知道如何提交JSFIDDLE。如果你能協助這將會很棒。 –

https://jsfiddle.net/#&togetherjs=Vn8pmqAtU1這就是你的意思，我猜。 –

是的，阿米特張貼適用於youtube視頻，但對於我的鏈接是http://pranamaya-yoga.com/calendar-2/action~month/exact_date~1477937700/cat_ids~156/request_format~json/它doent工作良好。我需要上面的鏈接進行發佈，但同時要對移動設備和臺式機或筆記本電腦做出響應。當在不同的熨平板上查看時有空白空間。我作爲一個問題張貼的問題適用於手機，但在桌面上它底部有大的空白區域。這裏是我談論的鏈接http://pranamaya-yoga.com/schedule-thamel/ –


             
   
    
    .schedule { 
 
    \t position: relative; 
 
    \t padding-bottom: 56.25%; /* 16:9 */ 
 
    \t padding-top: 25px; 
 
    \t height: 0; 
 
    } 
 
    .schedule iframe { 
 
    \t position: absolute; 
 
    \t top: 0; 
 
    \t left: 0; 
 
    \t width: 100%; 
 
    \t height: 100%; 
 
    } 
    <div class="schedule"> 
 
     <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe> 
 
     </div> 
    
   
 

 


.schedule iframe { 
    position: absolute; 
    top:0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

來源

2016-11-28 12:04:29

適用於YouTube視頻，但對於我的鏈接它不起作用 http://pranamaya-yoga.com/calendar -2 /動作〜月/ exact_date〜1477937700/cat_ids〜156/request_format〜JSON –

如何使<iframe>在wordpress中響應。我只能在移動設備或桌面設備上進行響應。需要它在兩個工作都很好

回答

相關問題