I have embedded a google map successfully with this Responsive iframe (google maps) and weird resizing
But I cannot change the width, it's too wide. Changing width:100% works but then it's not in the middle of page anymore.
Use :
<div style = "text-align:center;">
<iframe src="http://maps.google.com/maps/ms?vpsrc=6&ctz=-480&ie=UTF8&msa=0&msid=210840796990572645528.00049770919ccd6759de3&t=m&ll=30.751278,68.203125&spn=84.446143,175.429688&z=2&output=embed" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="635" height="300"> </iframe>
</div>
Related
Here is my iframe :
<div class="col-md-5 md-offset-1 col-sm-12" >
<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://app.mailjet.com/widget/iframe/2lW2/4ew" width="100%" height="224"></iframe>
</div>
And here is the result :
As you can see :
there is a scrollbar, although i specified "no".
I need to scoll to access the confirmation button
When I increase the height of iFrame, it doesn't resize the inside box.
Any help ?
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 use an iframe to embed code where there is a youtube player and some html but the problem is that the full screen button is not present on the youtube player.
Iframe used : http://jsfiddle.net/94150148/8rmbv7mk/
<iframe src="http://www.webvideoproduction.fr/v/vga/230415y.html" width="523" height="880" style="border-width: 0; overflow: hidden; width: 100%;"></iframe>
Do you have a solution ?
Thanks
You have to add allowfullscreen in your youtube iframe tag, where your youtube video is embbeded..
Use the following code:
<iframe width="560" height="315" src="http://www.youtube.com/embed/PD8r5A4sonw" frameborder="0" allowfullscreen></iframe>
Hope this helps.
Update
Hi, try this updated code. it worked for me.
<iframe width='420' height='315' src='http://www.youtube.com/embed/PD8r5A4sonw?rel=0&' allowfullscreen ></iframe>
I have the following video which looks extremely big on the website. Looks right on fiddle. What could be wrong here? Please guide. Thanks. Fiddle. Website.
<iframe src="//player.vimeo.com/video/117775232" width="500" height="375" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p>
NAYA JEEVAN in 90 Seconds
from Naya Jeevan on Vimeo.
</p>
you have
width:100%
height:100%
on .video