Below is my code, i am trying to center an iframe , but its always going to left !Here is fiddle http://jsfiddle.net/4yL4od8j/
.videowrapper {
text-align : center;
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videowrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: 700px;
max-height: 400px;
}
my html
<center> <div class="videowrapper "><iframe src="http://www.youtube.com/embed/VA770wpLX-Q?&rel=0&theme=light&autohide=1&color=white" frameborder="0" allowfullscreen></iframe></a></div></center>
To make you frame center you need to give your videowrapper a specific width and make the margin left and right as auto.
.videowrapper {
float: none;
clear: both;
width: 700px;<-- Added-->
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
margin: 0 auto;<-- Added-->
max-width: 100%;<-- Added-->
}
Working fiddle
Despite you wanna make your frame responsive always use max-width: 100% to your videowrapper.
without css solution. iframe can align itself in the text paragraph, so put it in empty paragraph with text-align:center
<p style="text-align:center;">
<iframe width="420" height="315" align="middle"
src="https://www.youtube.com/embed/YOURVIDEO?controls=0" allowFullScreen>
</iframe>
</p>
Try this:
<div align="center">
<div class="videowrapper "><iframe width="560" height="315" src="http://www.youtube.com/embed/VA770wpLX-Q?&rel=0&theme=light&autohide=1&color=white" frameborder="0" allowfullscreen></iframe></a></div>
</div>
Related
I'm trying to embed a youtube video into my project, it works and I also tried to apply a 16:9 ratio with padding-bottom: 56.25% like as most tutorials out there.
The issue is, the height of video is happened to be 100% of the container, What should I fix in my CSS to get rid of the top/bottom blackbar?
Here's my code pen attemp: https://codepen.io/DieByMacro/pen/QXmJez
.HomePage-homeVideoWrapper-274 {
height: 0;
margin: auto;
z-index: 1;
position: relative;
max-width: 720px;
padding-top: 25px;
padding-bottom: 56.25%;
}
.HomePage-homeVideoWrapper-274 iframe {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
position: absolute;
}
<div class="HomePage-homeVideoWrapper-274">
<iframe height="auto" src="https://www.youtube.com/embed/Qjmp2r2OsZ4" title="Home-admin tutorial" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
</div>
This is very common problem which we are facing while we add a videos on our template.You just need to add max-width and width property on OUTER div not at HomePage-homeVideoWrapper-274. No need to added max-height in HomePage-homeVideoWrapper-274.
.outer {
width: 100%;
max-width: 750px;
margin: 0 auto;
}
.HomePage-homeVideoWrapper-274 {
height: 0;
margin: auto;
z-index: 1;
position: relative;
padding-top: 25px;
padding-bottom: 56.25%;
display: block;
overflow: hidden;
iframe {
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
position: absolute;
}
}
<div class="outer">
<div class="HomePage-homeVideoWrapper-274">
<iframe src="https://www.youtube.com/embed/Qjmp2r2OsZ4" title="Home-admin tutorial"></iframe>
</div>
</div>
Demo
I had an issue with turning a SoundCloud player and border responsive for mobile devices. I put the height and width to auto and fixed the responsive, but not the player doesn't fit into the border. It also stretches when on the desktop.
This is the HTML and CSS I have that makes it responsive, but the border and player don't fit.
.frame_outer iframe{
padding: 50px 49px;
background: url(http://www.dontcursekids.com/wp-content/uploads/2017/09/Border-1.png);
background-size: 100% 100%;
}
<div class="frame_outer" style="padding: 18px; width: auto; height: auto; text-align: center;"><iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/280952276&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false" width="100%" height="220" frameborder="no" scrolling="no"></iframe></div>
I'm assuming its something with my Css thats throwing it off. Any help or a guide in the right direction would be greatly appreciated.
This is what i came up with, used display:block; i also did a few changes in the html. The image you have used was not great imo, i cropped it so the outside extra space was removed.
.frame_outer {
padding: 50px 49px;
background: url(https://i.imgur.com/M57mh9s.png);
background-size: 100% 100%;
width: 100%;
}
iframe {
display: block;
width: 100%;
}
<div class="frame_outer" style="padding: 18px; width: auto; height: auto; text-align: center;">
<iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/280952276&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false" style="position: relative; height: 100%; width: 100%;"
frameborder="no" scrolling="no" allowtransparency="true"></iframe>
</div>
You can use the box-sizing: border-box; because you add the padding: 50px 49px; and width:100% to the iframe, so for the default box-sizing:content-box; the width of the iframe will be softened.
And you can also use margin negative values to adjust the padding:
.frame_outer {
overflow: hidden;
}
.frame_outer iframe{
padding: 50px 49px;
margin: -50px -49px;
background: url(http://www.dontcursekids.com/wp-content/uploads/2017/09/Border-1.png);
background-size: 100% 100%;
}
<div class="frame_outer" style="padding: 18px; width: auto; height: auto; text-align: center;"><iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/280952276&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false" width="100%" height="220" frameborder="no" scrolling="no"></iframe></div>
I embedded a responsive youtube video with bootstrap.
My aim: keep it's max size width="560" height="315" which is then centered.
How it should be: https://avexdesigns.com/responsive-youtube-embed/
But instead it goes beyond these limits, making the video very blurry.
How it should not be: https://bomengeduld.github.io/mos-man2/
So far I tryed to set max-width & max-height in css, but it only adjusts the width.
What Am I Doing Wrong in this Code? Thank you in advance for clearing this up!
If understood it correctly you want something like this:
#embed {
height: auto;
text-align: center;
background: black;
width: 100%; /* new */
max-width: 560px; /* new */
margin: 0 auto; /* new */
}
.videowrapper {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videowrapper iframe, .videowrapper object, .videowrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
<section id="embed">
<div class="container-fluid videowrapper">
<iframe src="https://www.youtube.com/embed/g42lHnzOeVs" width="560" height="315" frameborder="0" allowfullscreen=""></iframe>
</div>
</section>
I can't manage to get my Google Maps iframe to be centered on the page. I want the iframe to be responsive also. How can I make it responsive and centered? Below is my code.
CSS:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
HTML:
<div class="video-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1shr!2shr!4v1472200012915!6m8!1m7!1sF%3A-DjYDCrslZys%2FV79nfhQh6CI%2FAAAAAAAAC4Y%2F_3uT6StsL1YugvYPQXUgUGfAF_jN1MVzgCLIB!2m2!1d45.81664123898513!2d15.8375560739745!3f73.63479769484006!4f-19.58591212686629!5f0.4000000000000002" frameborder="0" width="560" height="315" allowfullscreen></iframe>
</div>
Just use text-align:center; on your div. https://jsfiddle.net/w0et2jz1/
Try the below style:
.video-container {
margin: 0 auto;
width: 560px !important;
}
Hope, it will help you for desktop
Here is my solution. Do have a look and let me know if its still not the way you wanted. Thanks.
CSS:
.video-container {
max-width: 70%;
height: auto;
border: 1px solid black;
margin: auto;
}
iframe {
width: 100%;
height: 50%;
}
For your situation if you need it to be fixed width and height on desktop but then be responsive you would need to add one more wrapping div and set the following css.
.container {
position: relative;
max-width: 560px;
margin: 0 auto;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="container">
<div class="video-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1shr!2shr!4v1472200012915!6m8!1m7!1sF%3A-DjYDCrslZys%2FV79nfhQh6CI%2FAAAAAAAAC4Y%2F_3uT6StsL1YugvYPQXUgUGfAF_jN1MVzgCLIB!2m2!1d45.81664123898513!2d15.8375560739745!3f73.63479769484006!4f-19.58591212686629!5f0.4000000000000002"
frameborder="0" width="560" height="315" allowfullscreen></iframe>
</div>
</div>
This will make the iframe 560px wide and 315px in height on desktops but then scale down nicely on mobile.
Here's a JSFiddle
I am trying to make a 3x3 layout style of videos on my website. I have them responsive but I can't figure out how the middle can be centered in between the left and right video and how to put space in between them. Also, I want some margin on the right and left so they don't hit the border of the webpage. Here is the HTML and CSS:
HTML:
<div class="video-layout">
<div class="video">
<div id="vid-left">
<iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
</div>
<div id="vid-mid">
<iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
</div>
<div id="vid-right">
<iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
CSS:
.video {
position: relative;
padding-bottom: 56.25%;
}
.video iframe {
position: absolute;
width: 100%;
height: 100%;
}
.video-layout {
max-width: 500px;
border: 1px solid green;
}
#vid-left {
margin-left: 25px;
float: left;
}
#vid-mid {
}
#vid-right {
float: right;
}
Here is my attempt at this: https://jsfiddle.net/w1mmLz4h/
CSS:
.video {
position: relative;
padding-bottom: 56.25%;
}
.video iframe {
width: 100%;
height: 100%;
}
.video-layout {
max-width: 500px;
border: 1px solid green;
}
#vid-left {
float: left;
padding:5px;
width:33%;
box-sizing:border-box;
}
#vid-mid {
float: left;
padding:5px;
width:33%;
box-sizing:border-box;
}
#vid-right {
float: left;
padding:5px;
width:33%;
box-sizing:border-box;
}
HTML:
<div class="video-layout">
<div class="video">
<div id="vid-left">
<iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
</div>
<div id="vid-mid">
<iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
</div>
<div id="vid-right">
<iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
Used OP's classic responsive video rules then scaled everything roughly at 30%.
Used flexbox to keep an equal amount of space between each video and the screen's edges.
Applied the defaults I use normally.
It's very responsive, shrink it, enlarge it, call it bad names it just keeps chugging along. All it needs is a simple media query to make it stack vertically when displayed on a phone/tablet portrait oriented....
.... Ok I added a media query for mobile portrait orientation. When testing it, go to dev tools and use the phone emulator, or better yet look at this in a phone ;-)
Snippet
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>35761650</title>
<style>
html {
box-sizing: border-box;
font: 500 16px/1.428'Raleway';
height: 100vh;
width: 100vw;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
position: relative;
font-size: 1rem;
line-height: 1;
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: scroll;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: black;
color: yellow;
}
.video {
position: relative;
padding-bottom: 56.25%;
height: 16vh;
width: 30vw;
}
.video iframe {
position: absolute;
width: 100%;
height: 56.25%;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.videoFrame {
position: relative;
display: flex;
flex-flow: row nowrap;
width: 100vw;
border: 1px solid green;
height: 100vh;
overflow-y: hidden;
overflow-x: scroll;
justify-content: space-around;
margin: 0 auto;
padding: 12vh 0;
}
#media screen and (max-device-width: 768px) {
.videoFrame {
flex-flow: column nowrap;
overflow-y: scroll;
overflow-x: hidden;
align-items: center;
margin: 0 auto;
padding: 0;
}
.video {
position: relative;
padding-bottom: 56.25%;
height: 0;
width: 100vw;
}
.video iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
}
</style>
</head>
<body>
<div class="videoFrame">
<div class="video">
<iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
</div>
<div class="video">
<iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
</div>
<div class="video">
<iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</body>
</html>
With this embed code, all your worries will be solved.
If you have uploaded videos to YouTube or other sites.
First, embed them and copy the code they provided.
Then place the embed code of your first video instad the line that says "Place your video code here" in my code.
Then place the code for your second video next to the same line in the other section of my code.
Putting the URL of the video directly will not work.
Ones Your video code are added to my code.
Copy and paste everything into a section of your site where you can embed the codes.
That will place your videos side by side.
Dont forget to adjust the video sizes in my code to fit the size of videod you want.
<iframe width="128" height="72"
place your embed video code here
<iframe width="128" height="72"
place your embed video code here