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>
Related
I am studying web design and making a mock website at the moment, I am very new to bootstrap, css and html and am not sure where I am going wrong, I am starting to pull my hair out as have been working on this all morning and getting nowhere so I'm hoping you guys can help me. I have been trying to align the text portion of my div to the right of the videos. I have managed to get it over to the right but not up alongside it so it's all inside the background container. It looks to me as though it could be an issue with the columns as the video columns stretch right across and I wonder if they are preventing the last one from being able to move up. I hope this makes sense.
I have tried different display and float options and separating and blending rows but don't seem to be winning.
HTML Code and CSS below that:
<!--CONTAINER MAIN ABOUT INFO-->
<div class="page-header">
<h2>About Us</h2>
</div>
<div class="container container-about">
<!--VIDEOS-->
<div class="row videos">
<div class="col-md-4 vid1">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/afRUIVxTGls" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="col-md-4 vid2">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/NNgRnJIjXM4" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="col-md-8 about">
<p><strong>lorem epson etc</p>
</div>
</div>
</div>
<!--END OF MAIN ABOUT INFO-->
CSS
.videos {
display: inline;
}
.about {
float: right;
}
enter image description here
Bootstrap's grid system is based on a 12-column grid. If you want content to be side-by-side on the same row, the column classes need to add up to a number equal to (or less than) 12. Right now, in that row you have a 4, 4, and 8—which adds up to 16:
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-8"></div>
</div>
</div>
If you're going for a layout where the first two columns take up a quarter of the row, and the second takes up a half, use 3 + 3 + 6 = 12 instead:
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-6"></div>
</div>
</div>
(Also, don't forget to close that <strong> tag.)
<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
<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!
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>