I have the code below which i am using from google docs to display a presentation, i would like to know is there any method of me hide the bar at the bottom so that it does not show up.
<div style="width: 960; height: 540;
background-color:White;">
<div style="z-index: -2;"><iframe src="https://docs.google.com/presentation/d/1FYhFR3a49gvmyqozJbtNe3eP7FogKJRwGE9bN7tihSs/embed?start=true&loop=false&delayms=3000" frameborder="0" width="960" height="569"></iframe></div>
</div>
set parent div height less the iframe height and use overflow: hidden; in parent div.
Try this code
<div style="width: 960px; height: 540px;background-color:White; overflow: hidden;">
<iframe src="https://docs.google.com/presentation/d/1FYhFR3a49gvmyqozJbtNe3eP7FogKJRwGE9bN7tihSs/embed?start=true&loop=false&delayms=3000" frameborder="0" width="960" height="569"></iframe>
</div>
DEMO
try adding rm=minimal
<iframe src="https://docs.google.com/presentation/d/1FYhFR3a49gvmyqozJbtNe3eP7FogKJRwGE9bN7tihSs/embed?start=true&loop=false&delayms=3000&rm=minimal" frameborder="0" width="960" height="569"></iframe>
Related
Can anyone say why this is wrong? I thought the yellow div would be across the whole page like the pink div. But when I look at it - no, the yellow div lines up under the image not the whole length.
<div style=width:100%;background:pink>
fjadlskjfdsf dslkfsda sdjkfh
</div>
<div style=width:100%;background:red>
<div style=width:60%;float:left>
<img src=Library_left.jpg width=100%>
</div>
<div style=width:40%;float:right>
<iFrame scrolling="no" frameborder="0" width="100%" height="100%" src="https://silib2.net/eResources/scripts/carousel/carousel.php"> </iFrame>
</div>
</div>
<div style=width:100%;background:yellow>
<h1 style=text-align:center>adslkjfasdlkjf</h1>
why is this div not wider?
</div>
( https://silib2.net/eResources/scripts/carousel/form.htm )
It is probably something stupid?
Please Try This:-
<div style=width:100%;background:pink>
fjadlskjfdsf dslkfsda sdjkfh
</div>
<div style="width:100%;background:red; clear: both; overflow: hidden;">
<div style=width:60%;float:left>
<img src=Library_left.jpg width=100%>
</div>
<div style=width:40%;float:right>
<iFrame scrolling="no" frameborder="0" width="100%" height="100%" src="https://silib2.net/eResources/scripts/carousel/carousel.php"> </iFrame>
</div>
</div>
<div style="width:100%;background:yellow; clear: both; overflow: hidden;">
<h1 style=text-align:center>adslkjfasdlkjf</h1>
why is this div not wider?
</div>
Static Height to Iframe May solve your issue
<iframe scrolling="no" frameborder="0" width="100%" height="165px" src="https://silib2.net/eResources/scripts/carousel/carousel.php"> </iframe>
You need to give your iframe a smaller height which would be approximately
height: 225px;
And you need to give the div that wraps it [one with red background on it]
clear:both; Overflow:hidden;
I want to make my iframe responsive.
Following is my code
.game_frame iframe {
display: block;
margin: auto;
}
<div class="col-md-12">
<div class="game_frame">
<iframe src="http://www.freeonlinegames.com/embed/142842" width="800" height="400" frameborder="no" scrolling="no"></iframe>
</div>
</div>
Even i changed this
<div class="col-md-12">
Too
<div class="embed-responsive embed-responsive-16by9 col-md-12 text-center">
but still facing problem and my iframe is not in center. I don't wanna use full width iframe, i wanna
width="800" height="400"
EDIT :- Iframe on Dextop site , Iframe on Mobile site
Bootstrap doesn't have a 2:1 ratio (for your 800x400 example) responsive embed utility; you'd have to add a class to your CSS and HTML:
.embed-responsive-2by1::before {
padding-top: 50%;
}
Edit:
I wasn't able to properly load http://www.freeonlinegames.com/embed/142842 in any browser I tried for whatever reason, but the the following code should work; just replace the dummy img with the iframe: https://codepen.io/pixleight/pen/KvEWRJ/
.embed-responsive-2by1::before {
padding-top: 50%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="embed-responsive embed-responsive-2by1">
<img src="//dummyimage.com/800x400" class="embed-responsive-item" />
</div>
</div>
I have this code:
<div align="center">
<iframe scrolling="no" src="//blockadz.com/ads/show/show.php? a=6NJWBKLSGP8CY&b=OYEPEGYYZ996L" style="overflow:hidden;width:468px;height:60px;" frameborder="0"; padding- bottom: 20px; display:inline-block;></iframe>
</div>
<div style="text-align:center;">
Advertise in this spot
</div>
<div align="center">
<iframe scrolling="no" src="//blockadz.com/ads/show/show.php? a=6NJWBKLSGP8CY&b=OYEPEGYYZ996L" style="overflow:hidden;width:468px;height:60px;" frameborder="0"; padding- bottom: 20px; display:inline-block;></iframe>
</div>
<div style="text-align:center;">
Advertise in this spot
</div>
I want to show in the same row, but don't know how?
I tried adding: display:inline-block; and white-space: nowrap; but nothing changed.
Any help?
Try adding CSS float to your main divs
<div style="float:left;">
<div align="center">
<iframe bottom:="" frameborder="0" padding-="" scrolling="no" src="//blockadz.com/ads/show/show.php?%20a=6NJWBKLSGP8CY&b=OYEPEGYYZ996L" style="overflow:hidden;width:468px;height:60px;"></iframe>
</div>
<div style="text-align:center;">
Advertise in this spot
</div>
</div>
<div style="float:right;">
<div align="center">
<iframe bottom:="" frameborder="0" padding-="" scrolling="no" src="//blockadz.com/ads/show/show.php?%20a=6NJWBKLSGP8CY&b=OYEPEGYYZ996L" style="overflow:hidden;width:468px;height:60px;"></iframe>
</div>
<div style="text-align:center;">
Advertise in this spot
</div>
</div>
See in jsfiddle
Two divs with width 50%:
HTML
<div id="first_column">
<div align="center">
<iframe width="560" height="315" src="https://www.youtube.com/embed/CevxZvSJLk8" frameborder="0" allowfullscreen></iframe>
</div>
<div style="text-align:center;">
Advertise in this spot
</div>
</div>
<div id="second_column">
<div align="center">
<iframe width="560" height="315" src="https://www.youtube.com/embed/CevxZvSJLk8" frameborder="0" allowfullscreen></iframe>
</div>
<div style="text-align:center;">
Advertise in this spot
</div>
</div>
CSS
#first_column,
#second_column {
width: 50%;
}
#first_column {
float:left;
}
#first_column {
float:right;
}
Example:
http://codepen.io/anon/pen/vyWrbX
You have a couple of different issues going on here:
You have invalid markup on the iframes (some of your CSS is outside the "style" attribute so won't have any effect.)
Your "advertise in this spot" divs are full page width, which will interfere with the side-by-side layout you're attempting to apply to the iframes.
The simplest solution is to add parent containers to each set of iframe-plus-link, and apply the layout to those containers. For clarity here I've pulled your inline CSS out into class declarations, and changed the sizes to fit within the SO layout, but you can adjust this to whatever sizes and styles you like:
.container {
width: 200px;
display:inline-block;
}
iframe {
height: 100px;
width: 200px;
}
.ad {
text-align:center
}
<div class="container">
<iframe src="//example.com"></iframe>
<div class="ad">Advertise in this spot</div>
</div>
<div class="container">
<iframe src="//example.com"></iframe>
<div class="ad">Advertise in this spot</div>
</div>
Just add css to the siblings elements (in this case the parent <div> element) to make them show in the same line, like
div[align] { display: inline-block; }
or
div[align] { float: left; }
and define a width for them (if they are adapting to content width they can get on new line if too big)
div[align] { width: 50%; }
iframe { width: 100%; } /* or max-width */
I have tried several codes, like this one:
<div class="box"><iframe src="https://embed.spotify.com/?uri=spotify:user:1290230929:playlist:6nTIVNGZfnZ4urUiwHIgpT"
frameborder="0"
scrolling="no"
width="100%"
height="512"
align="left"> </iframe> </div>
<div class="box"><iframe src="https://embed.spotify.com/?uri=spotify:user:1285279066:playlist:56KI83cMiMTOocIdXq2R5j"
frameborder="0"
scrolling="no"
width="100%"
height="512"
align="right">
</iframe>
And it does not work side by side, if someone can fix this for me, thank you.
Here is a solution using float and divs
HTML:
<div class="box">
<iframe src="https://embed.spotify.com/?uri=spotify:user:1290230929:playlist:6nTIVNGZfnZ4urUiwHIgpT" frameborder="0" scrolling="no" width="100%" height="512" align="left"> </iframe>
</div>
<div class="box">
<iframe src="https://embed.spotify.com/?uri=spotify:user:1285279066:playlist:56KI83cMiMTOocIdXq2R5j" frameborder="0" scrolling="no" width="100%" height="512" align="right"></iframe>
</div>
CSS:
.box{
float:left;
margin-right:20px;
}
.clear{
clear:both;
}
http://jsfiddle.net/E5WFT/
1. Remove width="100%" from the iframes.
2. Change align="right" to align="left" on the second iframe if you want them completely side-by-side.
3. Add this CSS:
.box { display:inline-block; }
DEMO
Problems are here :
Why width 100% ? and why in div ? ( this way , they will never be side by side :-))
Try this :
http://jsbin.com/hirirazu/3/edit
It can't work where width is 100%, as that states that the width of the iframe is 100% of the body. Also, don't use inline styles where possible as many of them are or will be deprecated.
Here is an example of a left and right iframes.
CSS
.menu {
float:left;
width:33%;
height:1250px;
border:none;
}
.mainContent {
float:left;
width:65%;
height:1250px;
border:none;
}
index.html
<iframe id="choices" class="menu" name="choices" src="choices.html"></iframe>
<iframe id="main" class="mainContent" name="main" src="main.html"></iframe>
I am designing a site that has a semi-transparent container for the content, which is divided into two columns. My CSS:
#content {
width: 80%; margin-left: 10%; margin-top: 25px; margin-bottom: 25px;
background-color: rgba(256,256,256,.6); box-shadow: 0 0 6px}
#sidebox {
width: 25%; padding-left: 2.5%; padding-right: 2.5%; float: right;
background-color: #FFF}
#main {
width: 65%; padding-left: 2.5%; padding-right: 2.5%; float: left}
The HTML for embedding the video:
<div id="content">
<div id="sidebox">...</div>
<div id="main">
<div class="post">
<a name="song" />
<p class="title">New song!</p>
<p class="date">Posted January 16, 2013</p>
<center>
<iframe width="480" height="360"
src="http://www.youtube.com/embed/tF7DQBlYQGM"
frameborder="0" allowfullscreen style="margin-left: -3%" />
</center>
</div>
</div>
</div>
I put some static stuff in the sidebox and then make news posts to the main div. If I embed a video in an iframe in main, then the semi-opaque background from content (as well as the drop-shadow) doesn't render. I found a lot of solutions geared towards what to do if you want to overlay a div on an iframe, but nothing about putting an iframe in a div container screwing up the styling of that container.
The website, which currently has the video embedded: http://physics.nyu.edu/~dzb212/music_index.html
I'm not 100% sure of the reasoning behind it, but if you add display:inline-block to your content style it seems to work on my end
Try this...
html content :
<div id="content">
<p> content div </p>
<div id="sidebox">...</div>
<div id="main">
<div class="post">
<p> main div </p>
<a name="song" />
<p class="title">New song!</p>
<p class="date">Posted January 16, 2013</p>
<center>
<iframe width="480" height="360"
src="http://www.youtube.com/embed/tF7DQBlYQGM"
frameborder="0" allowfullscreen style="margin-left: -3%" />
</center>
</div>
</div>
</div>
I noticed some strange behaviors arising from my use of <a href="blah" /> kinds of statements in my HTML. I was under the impression that <[stuff] /> was the same as <[stuff]></[stuff]>, and that it was just a convenient shorthand for an element that contained nothing else. However, I don't know if this is true, and I found that huge chunks of text were unexpectedly being moved into <a> elements. I therefore changed
<iframe width="480" height="360" src="http://www.youtube.com/embed/tF7DQBlYQGM"
frameborder="0" allowfullscreen style="margin-left: -3%" />`
to
<iframe width="480" height="360" src="http://www.youtube.com/embed/tF7DQBlYQGM"
frameborder="0" allowfullscreen style="margin-left: -3%"></iframe>
and all seems to be displaying correctly. I no longer even need display: inline-block in the content styling.
Thanks for your help.