I would like to embed iframe from openstreetmap in my reveal.js presentation by it doesn't work out of the box.
Any suggestion ?
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=5.124435424804688%2C45.05072537350321%2C5.890731811523438%2C45.322219956396964&layer=mapnik&marker=45.186634524469866%2C5.5075836181640625" style="border: 1px solid black"></iframe>
<br/>
<small>View Larger Map</small>
the result is an empty box
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 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>
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>