why can't i see the video, it just show a white space. (i edited the link of the video)
if i check the video on youtube its fine.
if i right click on the white space it says "movie not loaded" but even if i wait doesn't happen anything. i also uploaded the video on the ftp of the website, can i just load it from there? how?
<html>
<head>
<title></title>
</head>
<body style="margin:0px auto; text-align:center; color:white;" >
<div id="container" style="margin:0; padding:0; text-align:center;" >
<div id="main" style="width:100%;margin:0px auto;">
<div id="hdr" style="background-image:url(bg.jpg);float:left;width:100%;height:110px;">
</div>
<div id="hdr2" style="background-image:url(fascia.png);float:left;width:100%;height:70px;">
footer
</div>
<div id="bdy" style="background-image:url(bg.jpg);float:left;width:100%;height:70px;">
body
</div>
<div id="ftr" style="background-image:url(bg.jpg);float:left;width:100%;height:500px;">
<object width="640" height="360"><param name="movie" value="//www.youtube.com/v/xxxxxxxxx"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/xxxxxxxxx" type="application/x-shockwave-flash" width="640" height="360" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</div>
<div id="ftr2" style="background-image:url(bg.jpg);float:left;width:100%;height:280px;">
</div>
</div>
</div>
</body>
</html>
Use this:
<iframe width="640" height="360"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
Hopes this helps!
Related
I am attempting to create a single page desktop site using uikit css framework that will contain a bunch of iframes (videos). Works great except whenever the amount of videos exceeds the size of my browser I get a scroll bar. With my current setup, is it possible for me to make all of these iframes fit into the page regardless of browser size?
Here's the code (should work fine locally for anyone who tries it)
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/css/uikit.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit-icons.min.js"></script>
</head>
<body>
<div class="uk-section uk-section-primary uk-padding-remove-vertical">
<nav class="uk-navbar uk-navbar-container uk-navbar-transparent uk-padding-small">
<div class="uk-navbar-left">
</div>
</nav>
</div>
<div class="uk-flex-wrap uk-grid-small uk-child-width-1-3#m uk-child-width-1-2#s uk-flex-center uk-text-center" uk-sortable="handle: .uk-card" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-hover uk-card-body uk-card-small">
<iframe width="100%" height="30%" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-hover uk-card-body uk-card-small">
<iframe width="100%" height="30%" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-hover uk-card-body uk-card-small">
<iframe width="100%" height="30%" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-hover uk-card-body uk-card-small">
<iframe width="100%" height="30%" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-hover uk-card-body uk-card-small">
<iframe width="100%" height="30%" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</body>
</html>
I solved this by making my own grid since I could not do it with UIKit. It is 100% responsive and the contents of the grid stay inside the viewable area of the browser regardless of the size, columns, or rows.
Here's an example:
.wrapper {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
}
<div class="wrapper">
<div>
<iframe
src="..."
height="100%"
width="100%"
allowfullscreen="true">
</iframe>
</div>
<div>
<iframe
src="..."
height="100%"
width="100%"
allowfullscreen="true">
</iframe>
</div>
</div>
<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
I have <div> element to show pop-up message. I already set z-index:1000 and add <iframe> but the div element still doesn't show above the live streaming video (embed plugin) in Safari browser. I used Chrome and Firefox, both of which work, but it doess't work in Safari Windows.
This is my code in a Fiddle.
<BODY style="background:transparent">
<div style="position:relative; z-index:0;">
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="240" height="180">
<param name="wmode" value="transparent"></param>
<embed height="180" width="240" align="left" src="xxxx.avi" autoplay="false" controller="true" wmode="transparent"></embed>
</object>
<object>
<param name="wmode" value="transparent"></param>
<param name="movie" value="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&hl=en_US"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="240" height="180"></embed>
</object>
</div>
<div id="draggable">
<div class="drag">
<p>Drag me around!! Drag me around!!</p>
<p>Drag me around!! Drag me around!!</p>
<p>Drag me around!! Drag me around!!</p>
</div>
<iframe class="frame"></iframe>
</div>
Can anyone find any issues with this code?
You need to change/set your wmode to opaque.
<embed src="..." wmode="opaque"></embed>
And try setting the appropriate type for the first object.
<embed src="xxxx.avi" ...wmode="opaque" type="application/x-shockwave-flash"></embed>
http://jsfiddle.net/8C2py/7
As far as I can remember flash is on top of all HTML elements.
You can try to hide it when the pop up is there. Unfortunately I haven't seen a work around for that yet.
One good method is to have a place holder image that is the same size as the video and toggle them
<div class="video">
<!-- video here -->
</div>
<div class="placeholder" style="display:none;">
<img src="path/to/placeholder.jpg"
</div>
when you have the pop up opened
$(".video").css('display','none');
$(".placeholder").css('display','block');
Here are the specs of the z-index property (src: w3.org):
Each box belongs to one stacking context. Each positioned box in a
given stacking context has an integer stack level, which is its
position on the z-axis relative other stack levels within the same
stacking context.
I think that <div class="drag"> is not in the same stacking context as your flash objects.To make sure that the stacking context is correct, make the <div id="draggable"> also relative, and give it a higher z-index than the <div> that contains the flash objects.
Note: I'm not able to test Safari at the moment, so let me know if it works or not:
<div style="position:relative; z-index:1;">
... your flash objects...
</div>
<div id="draggable" style="position: relative; z-index: 2;">
<div class="drag">
<p>Drag me around!! Drag me around!!</p>
<p>Drag me around!! Drag me around!!</p>
<p>Drag me around!! Drag me around!!</p>
</div>
<iframe class="frame"></iframe>
</div>
works IE FF Chr & Saf
Placing a div over an iframe/video...
to place div over an image just replace the iframe w/ your image ....
trick part is for video ... you must add ... ?wmode=transparent ... to the end of the src url...
<!DOCTYPE HTML >
<style type="text/css">
.Container {position:relative; float:left; border: 1px solid #0f0; }
.Vid {position:absolute; top:7px; left:7px; width:90%; height:90%; }
.Lyr { float:left; width:90%; height:90%; background-color: #a3a3e6; opacity:0.5; border: 1px solid #f00; }
</style>
<div id="Cntr0" class="Container" style="width:220px; height:140px;">
<iframe id="frm0" class="Vid" src='http://www.youtube.com/embed/y1VVXrUdO2s?wmode=transparent' frameborder='0'></iframe>
<div id="div0" draggable="true" class="Lyr" ></div>
</div>
or if you want to use your Object code....
<!DOCTYPE HTML >
<style type="text/css">
.Container {position:relative; float:left; border: 1px solid #0f0; }
.Vid {position:absolute; top:7px; left:7px; width:90%; height:90%; }
.Lyr { float:left; width:90%; height:90%; background-color: #a3a3e6; opacity:0.5; border: 1px solid #f00; }
</style>
<div id="Cntr0" class="Container" style="width:260px; height:190px;">
<object class="Vid" >
<param name="wmode" value="transparent"></param>
<param name="movie" value="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&hl=en_US"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&hl=en_US" type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true" wmode="transparent" width="240" height="180"></embed>
</object>
<div id="div0" draggable="true" class="Lyr" ></div>
</div>
and the avi code....
<!DOCTYPE HTML >
<style type="text/css">
.Container {position:relative; float:left; border: 1px solid #0f0; }
.Vid {position:absolute; top:7px; left:7px; width:90%; height:90%; }
.Lyr { float:left; width:90%; height:90%; background-color: #a3a3e6; opacity:0.5; border: 1px solid #f00; }
</style>
<div id="Cntr0" class="Container" style="width:260px; height:190px;">
<object class="Vid" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="240" height="180" >
<param name="wmode" value="transparent"></param>
<embed height="180" width="240" align="left" src="xxxx.avi" allowscriptaccess="always" autoplay="false" controller="true" wmode="transparent"></embed>
</object>
<div id="div0" draggable="true" class="Lyr" ></div>
</div>
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>