This iframe's width and height won't change. I want responsive design. Please help.
Now:
<iframe src="http://www.kadinvekadin.net/mod-burclar.php"
frameborder="0"
scrolling="no"
width="300"
height="300">
Modified 500x500 - not working, still 300x300:
<iframe src="http://www.kadinvekadin.net/mod-burclar.php"
frameborder="0"
scrolling="no"
width="500"
height="500">
for a pure CSS solution you need to wrap your iframe around a container and apply styles to it, for more details please see http://andmag.se/2011/11/responsive-embeds/
Another option is using jquery
please take a loom at https://gist.github.com/aarongustafson/1313517
Try this code,
<html>
<body>
<style>
html,body {height:100%;}
.wrapper {width:80%;height:100%;margin:0 auto;background:#CCC}
.iframe1 {position:relative;}
.iframe1 .ratio {display:block;width:100%;height:auto;}
.iframe1 iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
</style>
<div class="wrapper">
<div class="iframe1">
<img class="ratio" src="sometransparentimage.jpg"/>
<iframe src="http://www.kadinvekadin.net/mod-burclar.php" frameborder="0"
allowfullscreen></iframe>
</div>
</div>
</body>
</html>
Related
Hey guys hope all well...
I need this code to play inline on iPhone
<iframe width="560" height="300" src="https://yeco.online/VideoPlayer/mix54fm" style="position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;" scrolling="no" frameborder="0" allow="autoplay" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
What do I do here where do I add the variable for inline and what is the varible for inline?
Thx!
David
You need to set playsinline on the <video> element inside the iframe.
I am use PlusThis for video tracking and the code below works fine when viewing the desktop version of the site, however, when I use mobile the video is obviously not responsive.
In order to use the PlusThis feature, I need to use the code below and I can't figure out how to make it responsive:
<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>
Could someone please show me how to make this code responsive while still keeping the JavaScript intact that I need in order to use features from PlusThis?
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>
<iframe id="vimeo_187396498" src="https://player.vimeo.com/video/187388888" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
You used width and height inside iframe tag. So, Please take that iframe tag in a div area and use css iframe as div child. Please follow example below:
HTML code:
<div class="videoiframe">
<iframe id="vimeo_187396498" src="https://player.vimeo.com/video/187388888" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
CSS code:
.videoiframe iframe {width:100%; height: auto}
I hope, You got it.
I just copy the embed code from the youtube videos and I need to use the youtube vidoes for advertisements
code from youtube
<iframe width="350" height="260" src="https://www.youtube.com/embed/_K9VcuVmDFg" frameborder="0" allowfullscreen></iframe>
I have edited and updated the code and it looks like this
<div class="video">
<iframe src="https://www.youtube.com/embed/_K9VcuVmDFg" frameborder="0" allowfullscreen></iframe>
</div>
I have written my CSS and seems it does not have any effect on the Size of the YouTube on web page
CSS
.video{
width:67px;
height:80px;
}
As i increase the size the video stays normal.How to re-size the videos to look big in size?
You want to change the size of the iframe INSIDE the div with class 'video' so:
.video iframe {
width:67px;
height:80px;
}
you have to define class in iframe tag then that css will take effect
<iframe class="video" src="https://www.youtube.com/embed/_K9VcuVmDFg" frameborder="0" allowfullscreen></iframe>
<style>
.video{
width:67px;
height:80px;
</style>
I have a this :
<div style="height:100%">
<div id="menu" style="height:30px;width:100%">Ouhlala</div>
<iframe width="100%" frameborder="0" height="100%" src="baba"></iframe>
</div>
It's showing me 2 scroll bars. The height of the iframe is 100% but it's finally 100% + 30px. I don't know how to resolve that
You can use property calc() like this :
<div class="container">
<div id="menu" style="height:30px;width:100%">Ouhlala</div>
<iframe frameborder="0" src="baba"></iframe>
</div>
CSS
.container iframe{
height:calc(100% - 30px);
}
The bad about this maybe is compatibility check it here
i'm wrapping a youtube video inside of a div.vidwrapper.
I don't want the video to be visible but just the controls. This works fine in all Browsers but not in IE7. I have no clue what i have to do to position the video inside ov my .vidwrapper div in IE7.
html
<div class="vidwrapper">
<object class="video" width="308" height="100">
<embed src="http://www.youtube.com/watch?v=1QP-SIW6iKY" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="308" height="100" wmode="opaque"></embed>
</object>
</div>
css
/*VIDEO*/
.vidwrapper {
width:308px;
height:25px;
overflow:hidden;
position:relative;
}
.video {
bottom:0px;
position:absolute;
}
Here is an example http://jsfiddle.net/3n3C7/ Check this out in any modern browser and then check it out in IE7. I want only the controls to be visible in IE7.
Any idea how i could make that happen?
Try to use _height:21px; this should work.As i am not on Windows so this is probably my guess, but it works most of the time.
What about this?
<iframe title="YouTube video player" width="480" height="25" src="http://www.youtube.com/embed/riW4W66ptqI" frameborder="0" allowfullscreen></iframe>