I want to display a Google Map in my website via iframe, but it does not work. How can I get it done?
Here is source:
<div class="google-map">
<iframe src="https://www.google.com/maps/place/Rruga+Azem+Galica,+Tirana,+Albania/#41.3673698,19.7668261,17z/data=!3m1!4b1!4m2!3m1!1s0x135032024ea626ad:0x2af6740dbcc9fac7?hl=en-US"
frameborder="0" width="100%" height="300" marginwidth="0"
marginheight="0" scrolling="no">
Thanks.
The link you used in the src tag is not the embedding link, it's the sharing link.
Use this:
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2994.3090479975776!2d19.7668261!3d41.367369800000006!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x135032024ea626ad%3A0x2af6740dbcc9fac7!2sRruga+Azem+Galica%2C+Tirana%2C+Albania!5e0!3m2!1sen!2s!4v1427117877944"
frameborder="0"
width="100%"
height="300"
marginwidth="0"
marginheight="0"
scrolling="no">
</iframe
Related
I'm using GitHub pages and I have an issue with embeding videos: the video dispkay an error message when I click play and below my html code:
<div class="row video">
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/{% "eBzTCbGnlWo" %}" frameborder="0" allow="autoplay; encrypted-media"
allowfullscreen></iframe>
</div>
Please help me to solve this issue, below is a screenshot:
It's true that the readme.md itself cannot have embedded videos but a GitHub.io page is allowed to. Here I have an old video example still working today, proving that GitHub does allow videos.
Solution:
Replace your line:
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/{% "eBzTCbGnlWo" %}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
With this modified version:
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/LgWX2sPZQsE/" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
I have written this but it's only displaying 1st page of pdf on iOS Browsers.
<iframe type="application/pdf" src="<?php echo $pdf['url']; ?>" width="320px"
height="800px"
frameborder="1" scrolling="yes" align="left">
</iframe>
I solved the problem with following code.
<iframe frameborder="0" scrolling="no" height="100%" width="100%" src="https://docs.google.com/gview?url=<?php echo $pdf['url'];?>&embedded=true"> </iframe>
I would like to know how to embed a facebook video?
I followed instructions at:
https://developers.facebook.com/docs/plugins/embedded-video-player
But it does not work. This is the source code:
<html>
<head>
<title>My Website</title>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<h1>My Video Player</h1>
<div class="fb-video"
data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"
data-width="500"
data-allowfullscreen="true"></div>
</body>
</html>
Thanks in advance
I know this is an old post. But this code is the answer. For more information look here.
<!-- replace {facebook-video-url} with the correct url-->
<iframe
src="https://www.facebook.com/plugins/video.php?href={facebook-video-url}&show_text=0&width=560"
width="560" height="315"
style="border:none;overflow:hidden"
scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"
></iframe>
<!--example given-->
<iframe
src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FPlayStation%2Fvideos%2F10155554431506803%2F&show_text=0&width=560"
width="560" height="315"
style="border:none;overflow:hidden"
scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"
></iframe>
When you press recieve code , Click the tab for the Iframe. This works better for me
It would look something like this:
<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook%2Fvideos%2F10153231379946729%2F&width=500&show_text=false&height=281&appId"
width="500" height="281"
style="border:none;overflow:hidden"
scrolling="no" frameborder="0" allowTransparency="true"
></iframe>
<iframe
src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FPlayStation%2Fvideos%2F10155554431506803%2F&show_text=0&width=560"
width="560" height="315"
style="border:none;overflow:hidden"
scrolling="no" allowTransparency="true" allowFullScreen="true"
></iframe>
This works for me.
if you use an iframe you can insert a video you just need the link
<iframe width="420" height="315"src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1"></iframe>
at src tag just put the link of the video you want...
have a look at the link below for the full tutorial
http://www.w3schools.com/html/html_youtube.asp
How can I center the whole iframeset??
<html>
<head>
<style>
</style>
</head>
<frameset rows="100,*" frameborder="0" border="0" framespacing="0">
<frame name="topNav" src="banner.php">
<frameset cols="200,*" frameborder="0" border="0" framespacing="0">
<frame name="menu" src="menu.php" marginheight="0" marginwidth="0" scrolling="auto" noresize>
<frame name="content" src="dashboard.php" marginheight="0" marginwidth="0" scrolling="auto" noresize>
</frameset>
</frameset>
</html>
I tried <div> and applying text-align:center; But It didnt work? !
You are either going to have to create a frame on the left and right sides, or just create an iframe and avoid the whole issue (better option). frameset is obsolete so you should avoid using it.
replace your frameset tags with these,
<frameset class="center" rows="100,*" frameborder="0" border="0" framespacing="0">
<frameset class="center" cols="200,*" frameborder="0" border="0" framespacing="0">
Addthese css codes for the page
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
}
Declare the width of the div and apply:
margin:auto;
or
margin-left:auto;
margin-right:auto;
Working Sample
Additionally, please avoid using frameset in the future! It is obsolete in HTML5.
Cheers!
I am trying to embed a map using the code supplied by Google Maps with no alterations. When the page is displayed the Google pointer, zoom level indicator, etc. show but no streets or map, per se. This is the code Google suppled:
<iframe width="425" height="350" frameborder="0" scrolling="No" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?q=First+Baptist+Church,+Mc+Caysville,+GA+30555&hl=en&cd=2&ei=Gh10TNbbGZj0ygTT24nwCQ&sig2=hvRb-F6JuV91UcC6QUKGUw&ie=UTF8&view=map&cid=16713672426408470324&ved=0CBoQpQY&hq=First+Baptist+Church,+Mc+Caysville,+GA+30555&hnear=&ll=34.986955,-84.368584&spn=0.006153,0.013754&z=16&output=embed&iwloc=near&addr"></iframe>
<br />
<small>View Larger Map</small></div>
What is the problem?
It works on my machine.
Maybe you forgot to add the <html> and <body> tags. You also have a closing </div> that doesn't start anywhere, but it should nevertheless work even without its opening tag.
<html>
<head>
<title></title>
</head>
<body>
<div>
<iframe width="425" height="350" frameborder="0" scrolling="No" marginheight="0"
marginwidth="0" src="http://maps.google.com/maps?q=First+Baptist+Church,+Mc+Caysville,+GA+30555&hl=en&cd=2&ei=Gh10TNbbGZj0ygTT24nwCQ&sig2=hvRb-F6JuV91UcC6QUKGUw&ie=UTF8&view=map&cid=16713672426408470324&ved=0CBoQpQY&hq=First+Baptist+Church,+Mc+Caysville,+GA+30555&hnear=&ll=34.986955,-84.368584&spn=0.006153,0.013754&z=16&output=embed&iwloc=near&addr">
</iframe>
<br />
<small><a href="http://maps.google.com/maps?q=First+Baptist+Church,+Mc+Caysville,+GA+30555&hl=en&cd=2&ei=Gh10TNbbGZj0ygTT24nwCQ&sig2=hvRb-F6JuV91UcC6QUKGUw&ie=UTF8&view=map&cid=16713672426408470324&ved=0CBoQpQY&hq=First+Baptist+Church,+Mc+Caysville,+GA+30555&hnear=&ll=34.986955,-84.368584&spn=0.006153,0.013754&z=16&source=embed"
style="color: #0000FF; text-align: left">View Larger Map</a></small></div>
</body>
</html>