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>
Related
<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
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
I am writing a website as a collection of all my stuff (blog posts, YouTube vids etc.) and want to have a page of YouTube embeds. I want to have two columns of embeds, but cant figure out how to. If I edit the css and make the certain bits float to the correct side, it changes nothing. This is what my edited css looks like:
div.leftBodyVideo{
width: 45%;
float: left;
}
div.rightBodyVideo{
width: 45%;
float: right;
}
I then changed the html to align the correct tags right, but that didn't work either. it put the iframes that are meant to be right aligned in a weird position:
https://lh3.googleusercontent.com/-sur00UJ5A2c/Vb-7rkMrGlI/AAAAAAAAAHk/ZO3CpEcpoQ4/w426-h237/Capture.PNG
Here is the html:
<div id="leftBodyVideo">
<h5>Pyraminx ao12 16 46</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/XDN9BXLFGhg" frameborder="0" allowfullscreen></iframe>
<br><h5>TheCubicle.US | Yuxin 4x4 + ShengShou pyraminx</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/vEkiT62B-nE" frameborder="0" allowfullscreen></iframe>
<br><h5>Tutorial - sl1pg8r symbol with a cube</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/2f7xz6ym__0" frameborder="0" allowfullscreen></iframe>
</div>
<div id="rightBodyVideo">
<h5 align="right">Lubing DaYan ZhanChi Cube</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ydg0APsB7IU" frameborder="0" align="right" allowfullscreen></iframe>
<br><h5 align="right">Cubing - 2x2 ao5 36.9</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ydg0APsB7IU" frameborder="0" align="right" allowfullscreen></iframe>
<br><h5 align="right">Mindcuber Demo and Explaination</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/oEIMf1JdyDc" frameborder="0" align="right" allowfullscreen></iframe>
</div>
How can I fix this and get them aligned in 2 columns?
Thanks!
It looks like what you're trying to do is going to turn out looking sort of like a table layout, so try using divs with display: table, display: table-row, and display: table-cell.
Then you can use CSS to further style the cells, giving them padding and text-align if you so desire.
LIVE EXAMPLE - be sure to click "full page" after you run this snippet so you can see what I mean:
#table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
padding: 20px;
}
<div id="table">
<div class="row">
<div class="cell">
<h5>Pyraminx ao12 16 46</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/XDN9BXLFGhg" frameborder="0" allowfullscreen></iframe>
</div>
<div class="cell">
<h5 align="right">Lubing DaYan ZhanChi Cube</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ydg0APsB7IU" frameborder="0" align="right" allowfullscreen></iframe>
</div>
</div>
<div class="row">
<div class="cell">
<h5>TheCubicle.US | Yuxin 4x4 + ShengShou pyraminx</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/vEkiT62B-nE" frameborder="0" allowfullscreen></iframe>
</div>
<div class="cell">
<h5 align="right">Cubing - 2x2 ao5 36.9</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ydg0APsB7IU" frameborder="0" align="right" allowfullscreen></iframe>
</div>
</div>
<div class="row">
<div class="cell">
<h5>Tutorial - sl1pg8r symbol with a cube</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/2f7xz6ym__0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="cell">
<h5 align="right">Mindcuber Demo and Explaination</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/oEIMf1JdyDc" frameborder="0" align="right" allowfullscreen></iframe>
</div>
</div>
</div>
You are using id's in your HTML but then using class selectors in your CSS so your styles are never applied.
Please try:
#leftBodyVideo{
width: 45%;
display: inline-block;
}
#rightBodyVideo{
width: 45%;
display: inline-block;
}
<div id="leftBodyVideo">
<h5>Pyraminx ao12 16 46</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/XDN9BXLFGhg" frameborder="0" allowfullscreen></iframe>
<br><h5>TheCubicle.US | Yuxin 4x4 + ShengShou pyraminx</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/vEkiT62B-nE" frameborder="0" allowfullscreen></iframe>
<br><h5>Tutorial - sl1pg8r symbol with a cube</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/2f7xz6ym__0" frameborder="0" allowfullscreen></iframe>
</div>
<div id="rightBodyVideo">
<h5>Lubing DaYan ZhanChi Cube</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ydg0APsB7IU" frameborder="0" allowfullscreen></iframe>
<br><h5>Cubing - 2x2 ao5 36.9</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ydg0APsB7IU" frameborder="0" allowfullscreen></iframe>
<br><h5>Mindcuber Demo and Explaination</h5>
<iframe width="560" height="315" src="https://www.youtube.com/embed/oEIMf1JdyDc" frameborder="0" allowfullscreen></iframe>
</div>
See fiddle here.
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>