<div className="modal fade in" id="HelpVideo">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-body">
<iframe width="100%" height="350" src="https://vimeo.com/273326561" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
I am using the above modal, in the modal i am trying to use Iframe but I am getting Refused to display 'https://vimeo.com/273326561' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
Try:
<div className="modal fade in" id="HelpVideo">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-body">
<iframe src="https://player.vimeo.com/video/273326561" width="100%" height="350" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
I went to your video, hit share, then copy and pasted to embed code, then customized it to your dimensions
Related
<section class="features section-padding" id="features">
<div class="container">
<div class="row">
<div class="feature-list">
<h3>San Diego</h3>
<p>Departure</p>
<body>
<iframe src="http://flightaware.com/resources/airport/SAN/APD/AIRPORT+DIAGRAM/pdf" width="600" height="700">
<iframe src="https://flightaware.com/resources/airport/KSAN/DP/all/pdf" width="600" height="700">
</body>
<p>Approach</p>
<body>
<iframe src="https://flightaware.com/resources/airport/KSAN/STAR/all/pdf" width="600" height="700">
<iframe src="https://flightaware.com/resources/airport/KSAN/IAP/all/pdf" width="750" height="800">
</body>
</div>
</div>
</div>
</section>
That is what I have at the moment, but it only shows one pdf, the top one. How can I get it to show all the pdfs?
Thanks
First of all, you forgot to close your iframe tags.
The iframe tag is not self closing and should be explicitly closed like the following:
<iframe src="https://www.weather.com" width="600" height="700"></iframe>
(Notice the </iframe> closing tag)
This one worked for me (your original HTML re-worked):
<section class="features section-padding" id="features">
<div class="container">
<div class="row">
<div class="feature-list">
<h3>San Diego</h3>
<p>Departure</p>
<div>
<iframe src="https://www.weather.com" width="600" height="700"></iframe>
<iframe src="https://www.weather.com" width="600" height="700"></iframe>
</div>
<p>Approach</p>
<div>
<iframe src="https://www.weather.com" width="600" height="700"></iframe>
<iframe src="https://www.weather.com" width="750" height="800"></iframe>
</div>
</div>
</div>
</div>
</section>
See it here: https://jsfiddle.net/c55zztbn
If you are still not getting your iframe's src URL's shown, the url you are using might be using a "X-Frame-Options" response header which will prevent the iframe from loading it.
Hope that it helps a bit!
They gave me this code
<iframe width="424" height="916" src="//invis.io/U5574OIA3" frameborder="0" allowfullscreen></iframe>
but I'm not sure how to actually embed it? I tried inserting that line to my website but nothing shows up.
I will provide more info if necessary. Thanks in advance
update:
<div class="container">
<div class="row project">
<div class="ten columns offset-by-one">
<h class="pageheadproject">Final Outcome</h>
<p class="divider">~</p>
<p class="subheadproject">User Scenario</p>
<p class="pagecontent2-first"> Sample Text </p>
<iframe width="424" height="916" src="//invis.io/U5574OIA3" frameborder="0" allowfullscreen></iframe>
</div>
</div>
I gave the iframe a border and now it looks like this
yes you should maybe precise the way you embed it in your website as it seems to work in this simple JSFIDDLE
<iframe width="424" height="916" src="//invis.io/U5574OIA3" frameborder="0" allowfullscreen></iframe>
I am trying to embed a YouTube video in an HTML page with an iframe. I am in doubts (the size is wrong). The link for the video: https://www.youtube.com/watch?v=EqQ6gy-tT9Y?autoplay=1
My html code :
<section id="test">
<div style="text-align: center;">
<iframe src="https://www.youtube.com/watch?v=EqQ6gy-tT9Y?
autoplay=1" width="420" height="315" align="center">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
</section>
You should have copied the embed code from youtube:
<iframe width="560" height="315" src="https://www.youtube.com/embed/EqQ6gy-tT9Y?autoplay=1" frameborder="0" allowfullscreen></iframe>
Note that the link is:
https://www.youtube.com/embed/EqQ6gy-tT9Y
and not
https://www.youtube.com/watch?v=EqQ6gy-tT9Y
Your code should be:
<section id="test">
<div style="text-align: center;">
<iframe src="https://www.youtube.com/embed/EqQ6gy-tT9Y?autoplay=1" width="420" height="315" align="center">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
</section>
Btw.: You had a line-break in the <iframe src=""> property, i dont know if you just did that for readability, but its causes problems, keep linebreaks outside of html element properties
The link is http://thecodeclub.org/ and there is a YouTube video.
Works fine in Chrome but the iframe remains blank in Safari?
Has anyone else encountered this or have a fix?
<div class="wrapper wrapper-style2">
<article id="work">
<header>
<h2>What Most Schools Don't Teach</h2>
<p>Even rap stars are learning to code...</p>
</header>
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/nKIu9yen5nc?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
The Courses.
</article>
</div>
In the end it was the https that was causing the issue. Changed it to http as below and it worked fine.
<iframe width="560" height="315" src="http://www.youtube.com/embed/KX5PdVd1-OU" frameborder="0" allowfullscreen></iframe>
I have a iframe on my page. I have inserted a background image on it. but its not showing the Image. Here is my code.
<iframe scrolling="auto" allowtransparency="true" name="main" style="width:100%;height:90%" style="background-image:url(img/bg2.jpg)"> </iframe>
Try this:
<iframe scrolling="auto" allowtransparency="true" name="main" style="width:100%;height:90%;background-image:url(img/bg2.jpg)"> </iframe>
if it doesn't work move the background images to the container of the iframe.
Wrap your iframe with div and put it some class.
Ex:
<div class="wrap">
<iframe style="display:none" width="325" height="276" frameborder="0" scrolling="auto"></iframe>
</div>
in css:
.wrap{background:url(somepicture);}
.wrap iframe{opacity:0;}
Try this .. it should work(tested in IE/Firefox/Google Crome)
<div><img src="a.JPG"></div>
<div>
<iframe style="display:none" width="325" height="276" frameborder="0" scrolling="auto"></iframe>
</div>