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>
Related
An embedded video will not size to the container div. I've edited the CSS and finally got the poster image to scale correctly, but now the video has cropped on left and right sides by about 50px respectively.
Am I missing a container for the video in the HTML5? Could you please take a look to check my markup and styling?
.blog-side {
position: relative;
}
.wrapper {
margin: 0 auto;
}
.videowrapper {
width: 100%;
height: auto;
text-align: center;
overflow: hidden;
position: relative;
}
<section class="blog-side sp-seven blog-style-one standard-post video-post">
<div class="container">
<div class="row">
<div class="col-md-9 col-sm-12 col-xs-12 content-side">
<div class="blog-details-content">
<div class="wrapper">
<div class="videowrapper">
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" controls poster="images/news/orphan.png">
<source src="video/video1.webm" type="video/webm">
</video>
</div>
</div>
</div>
Many examples and instruction that I'm finding on google don't seem to work. I'm trying to keep the code clean.
Aspect Ratio
In the following demo any tag with non-Bootstrap classes was removed (it's a variable we can do without ATM. The Bootstrap looks good, There's two possible issues:
It could one or more of the non-Bootstrap classes.
or
The dimensions of your video isn't 16:9 ex. 640x360px, 1024x576, etc. The Bootstrap class .embed-responsive-16by9 requires that your video have an aspect ratio of 16:9.
Demo
The video in this demo is 320x240px an aspect ratio of 4:3 and the video tag has the class .embed-responsive-4by3
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<main class="container">
<section class="row">
<section class="col-md-9 col-sm-12 col-xs-12">
<figure class="embed-responsive embed-responsive-4by3">
<video class="embed-responsive-item" controls>
<source src="http://shapeshed.com/examples/HTML5-video-element/video/320x240.ogg" type="video/ogg">
</video>
</figure>
</section>
</section>
</main>
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 a client who is using blogspot and I've tried everything I know to try and center the iframe which holds the link. However, i just can't seem to get it to work. Here is the code I am using, and suggestions?
<section id="content">
<div class="ic"></div>
<div class="container_12">
<div class="wrapper">
<div class="newswrap">
<iframe src="http://metiriusnews.blogspot.com/" width="100%" height="800px">
<p>Your browser does not support iFrames.</p>
</iframe>
</div>
</div>
</div>
</section>
Try adding a display block to your Iframe and margin: 0 auto;
Or you can add to the Iframe a display: inline-block and to .newswrap{text-align: center;} but be sure that wrapper and newswrap have width: 100%
Then your code should be:
.wrapper{width: 100%;}
.newswrap{text-align: center;width: 100%;}
iframe{display:inline-block;}
iframe is inline element and you can do it via css adding text-aling:center; as in snippet below. But as you already have width:100% on Iframe, you probably have to align the container above the iframe using margin:0 auto; Also you structure has extra closing </DIV> which can be also an issue :
.newswrap {
text-align: center;
}
<section id="content">
<div class="ic"></div>
<div class="container_12">
<div class="wrapper">
<div class="newswrap">
<iframe src="http://metiriusnews.blogspot.com/" width="100%" height="800px">
<p>Your browser does not support iFrames.</p>
</iframe>
</div>
</div>
</div>
</section>
try this if you don't mind fixed width,also you can adjust the width
<style type="text/css">
iframe{
width: 800px!important;
margin:auto;
}
</style>
I have been trying to embed a video into bootstrap website.
But when I do, it takes up the whole width and height of the screen. I want it to be 560px x 315px on desktops and it should be responsive when the desktop size goes below 560px.
I have used:
<div class="container-fluid">
<div class="embed-responsive embed-responsive-16by9 div_style">
<iframe class="embed-responsive-item" src="http://www.youtube.com/embed/XGSy3_Czz8k" width="560" height="315" frameborder="0" allowfullscreen></iframe>
</div>
</div>
When I try to customize div tag by adding div_style class max-width: 560px; and max-height:315px;, It changes video width to 560px but the height takes up the whole page height.
You missed to add col-xs-12 col-sm-6 col-md-4 col-lg-2. Something like this.
<div class="container-fluid">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 padding-zero embed-responsive embed-responsive-16by9">
<div id="foxnews">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/KFGbHBbXG_g?modestbranding=1&autohide=1&showinfo=0&rel=0" allowfullscreen="true"></iframe>
</div>
</div>
</div>
The bootstrap embed-responsive classes use padding-bottom to set the "height" of the element.
You can change this property along with width within a media query for your desired effect.
#media all and ( min-width: 560px ) {
.div_style {
width:560px;
padding-bottom:315px !important;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="container-fluid">
<div class="embed-responsive embed-responsive-16by9 div_style">
<iframe class="embed-responsive-item" src="http://www.youtube.com/embed/XGSy3_Czz8k" width="560" height="315" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div className="overlay"></div>
<div className='container-fluid vids col-md'>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 padding-zero embed-responsive embed-responsive-16by9">
<video playsInline="playsinline" autoPlay="autoplay" muted="muted" loop="loop">
<source src="videos/design.mp4" type="video/mp4"/>
</video>
</div>
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.