我使用了下面的CSS和HTML来使iframe响应,但我只能在桌面或移动设备上解决这个问题,请帮助我解决这两个问题。 我真的很感谢你的帮助。
< 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 > .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%;如何 在wordpress中实现 响应性。我只能让它在手机或桌面上响应。需要它在两个方面都能很好地工作。
1
人关注
3
个评论
对不起,我自己不太会写代码,而且是边写边学,我是用wordpress做的网站。如果你能提供帮助,那就太好了。
jsfiddle.net/#&togetherjs=Vn8pmqAtU1
这就是你的意思吧。
是的,阿米特发布的内容在youtube视频上运行良好,但对于我的链接,即
pranamaya-yoga.com/calendar-2/action~month/.
..它运行得不好。我需要上面的链接是ifamed的,但同时要对手机和台式机或笔记本电脑有反应。当在不同的屏幕上查看时,有空的白色空间。我发布的问题在手机上运行良好,但在桌面上它的底部有很大的白色空间。这是我说的链接
pranamaya-yoga.com/schedule-thamel
Bikash Gyawali
发布于
2016-11-28
1
个回答
Amit Kutty
发布于
2016-11-28
0
人赞同
.schedule
{
position:
relative;
padding-bottom:
56.25
%;
/*
16
:9
*/
padding-top:
25px;
height:
0
;
.schedule
iframe
{
position:
absolute;
top:
0
;
left:
0
;
width:
100
%;
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>
Run
code
snippetHide
resultsExpand
snippet
.schedule
iframe
{
position:
absolute;
top:0;