I don't understand why removing the styling from the built in div's of the embed breaks the video. I've added custom css to fit the responsive design for my website but it just doesn't go to the full size that I need. I put the script for the api at the top of my page in case you wondered where I had put it
I've added a red outline to the video box to show where it should be filling.
<!-- video -->
<div class="video-inner-container">
<iframe src="https://player.vimeo.com/video/644944833?h=bbb92c5056&loop=1&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</div>
css:
/* video */
.video-inner-container{
float: left;
width: 100%;
outline: red 1px solid;
display: flex;
justify-content: center;
align-items: center;
}
iframe{
float: left;
width: 100%;
}
Result
Related
I have a website where users can post images in an article. The images are in portrait mode, and they always should be.
But on some mobile phones (Iphone X, Iphone 5C) (not my Redmi note 5) they're going horizontal.
Here's the HTML code for one image :
<a href="MyImg.jpg">
<img class="alignnone size-large" src="myImg.jpg" alt="IMG_7768_1200" width="768" height="1024" />
</a>
And the CSS:
img.alignnone {
display: block;
max-width: 95%;
width: auto;
height: auto;
}
.alignnone, img.alignnone {
margin-right: 2.5em;
margin-top: 2em;
display: inline;
border: 5px solid #555555;
}
I'm out of idea. Is this a CSS problem ?
This is an issue with image's metadata. It was set when the camera took the picture. It's not something you can change with your CSS.
I try to have a html5 video that fills the remaining space in a flexbox div.
However, it overflows rather than doing what I want:
.wrapper {
padding: 10px;
display: flex;
flex-direction: column;
max-height: 300px;
background-color: green;
}
.content {
width: 100%;
background-color: red;
}
video {
width: 100%;
height: 100%;
}
.footer {
width: 100%;
background-color: orange;
}
<div class="wrapper">
<div class="content">
<video src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" />
</div>
<div class="footer">footer</div>
</div>
https://jsfiddle.net/pwhwL29p/
You have a video and a footer inside the .wrapper element. The height: 100% on the video may or may not work, depending on the browser (more details below).
Since you don't have a height defined on the .content element, which holds the video, the results are unpredictable and unreliable. Again, browser behavior varies.
Here's a method that is more efficient and reliable across browsers:
.wrapper {
padding: 10px;
display: flex;
flex-direction: column;
max-height: 300px;
background-color: green;
}
.content {
display: flex; /* NEW */
width: 100%;
background-color: red;
}
video {
width: 100%;
/* height: 100%; <-- REMOVE; not necessary */
}
.footer {
width: 100%;
background-color: orange;
}
<div class="wrapper">
<div class="content">
<video src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" />
</div>
<div class="footer">footer </div>
</div>
revised fiddle
Here's how it works:
Turn the .content flex item, which contains the video, into a flex container.
This activates align-items: stretch, a default setting, which makes the video consume all available space in the cross-axis (in this case, height).
Remove height: 100%. Flex layout handles height dynamically.
More details:
Working with the CSS height property and percentage values
Chrome / Safari not filling 100% height of flex parent
UPDATE
From the comments:
Thank you. it works great for the standard video tag. Unfortunately it breaks with video.js
The video script adds a container to the HTML structure:
As a result, the function of the .content flex container no longer works.
You'll need to make adjustments to the CSS. Add this:
#video {
display: flex;
height: auto;
width: 100%;
}
revised fiddle
I'm trying to create a web page with three horizontal sections — a header, a menu, and a content section. My problem is that when I do this, the bottom iframe does not come close to the bottom of the browser window. I'm wondering if anyone can tell me what I'm doing wrong. My HTML looks like:
<!DOCTYPE html>
<html>
<head>
<style> </style>
</head>
<body>
<iframe src="title.htm" width="100%" height=90
style=" position:absolute;
top:0; left:0;
border:1px solid grey;"
name="title_frame">
<p>Your browser does not support iframes</p>
</iframe>
<iframe src="hmenu.htm" width="100%" height=70
style=" position:absolute;
top:90px;
left:0;
border:1px solid grey;
margin:0px 0px 0px 0px;"
name="hmenu_frame">
</iframe>
<iframe src="startpage.htm" width="100%" height="100%"
style=" position:relative;
top:160px;
vertical-align:bottom;
border:1px solid grey;"
name="content_frame">
</iframe>
</body>
</html>
There are no CSS includes. I'm previewing using Chrome and the bottom of the last iframe is about halfway down the window. I've tried using absolute position, playing with height, and tried an vertical-align:bottom, but none of it seems to work.
Here is a simple solution using display: flex; and <section> tags instead of iframes. Width flex-direction: column; you make sure, that your content sections are displayed on top of each other, not in a row.
This way, you don't need all the positioning you are doing and your markup as well as your styles remain clean and simple.
html,
body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
section {
width: 100%;
box-sizing: border-box;
border: 1px solid grey;
}
.title {
height: 90px;
}
.hmenu {
height: 70px;
}
.content {
height: 100%;
}
<section class="title">...</section>
<section class="hmenu">...</section>
<section class="content">...</section>
I suggest changing a bit your approach. This can be easily achieved using flexbox. Please keep in mind that using iframes in your context is not really recommended. You can see the end result in this fiddle.
First, remove the relative and absolute positioning from your iframes. They are not needed. Next, set display: flex; flex-direction: column; on body. Because you're setting borders around (and because it could save you a lot of trouble down the road), add box-sizing: border-box; on your iframes.
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
iframe {
box-sizing: border-box;
}
I have total 4 iframe.
<body>
<iframe id="top_frame" src=""></iframe>
<iframe id="left_frame" src=""></iframe>
<iframe id="right_frame" src=""></iframe>
<iframe id="bottom_frame" src=""></iframe>
</body>
I want 2 of them left_frame and right_frame side by side with their total width 100% (25% for left_frame and 75% for right_frame).
So I put this CSS:
#top_frame {
width: 100%;
}
#left_frame {
width: 25%;
}
#right_frame {
width: 75%;
}
#bottom_frame {
width: 100%;
}
But it did not work as you can see in this JSFiddle http://jsfiddle.net/srhcan/mwg3j17d/1/
If I decrease the width of right_frame to 73% then they will show side by side but will leave bit space on the right side.
What is the reason of this?
How can I have 2 iframes side by side with total width 100%?
First off, you need to tell the #left_frame and #right_frame that you want them to be next to each other.
You can do this a few different ways, but one of the most popular is floating them:
#left_frame,
#right_frame {
float: left;
}
Now, this works, but you still won't see them next to each other.
That's because they have an inherent 2px border by default.
Therefore, you can either remove the border:
#left_frame,
#right_frame {
float: left;
border: none;
}
OR, you can subtract the border from the widths. I would recommend this.
#left_frame,
#right_frame {
float: left;
}
#left_frame {
width: calc(25% - 4px);
}
#right_frame {
width: calc(75% - 4px);
}
Link to your updated fiddle: http://jsfiddle.net/mwg3j17d/4/
EDIT - As pointed out by #Rob Scott, you can add box-sizing: border-box; to the iframes to not have to use the calc statements. That would look like:
#left_frame,
#right_frame {
float: left;
}
iframe {
box-sizing: border-box;
}
Updated fiddle to fix the spacing issue to the right of right_frame
http://jsfiddle.net/mwg3j17d/12/
To answer your actual question of why:
Even without the borders, you still have a space between the two iframes. 25% + 75% + four borders + the size of the space is going to be more than 100%, so the second one has to wrap to a new line.
The simplest way to do this nowadays, and the way least likely to wreak havoc or fall apart on you, is to use flexbox, which is a pretty flexible way of stuffing some number of boxes in a row or column:
http://jsfiddle.net/mwg3j17d/10/
<iframe id="top_frame" src=""></iframe>
<div id="middle-row">
<iframe id="left_frame" src=""></iframe>
<iframe id="right_frame" src=""></iframe>
</div>
<iframe id="bottom_frame" src=""></iframe>
iframe {
box-sizing: border-box;
}
#middle-row {
display: flex;
}
Browser support is pretty good, though it's not gonna work on IE6.
Your iframes have a 2px border on them by default which is not included in the width of the box. You can remove this border with css using border: 0px, or include it in the width calculation using `box-sizing: border-box;' as Rob Scott mentioned. This will allow you to have their widths add to 100%. can place them side by side, by floating one left.
Updated Fiddle
CSS:
#top_frame {
width: 100%;
}
#left_frame {
float: left;
width: 25%;
}
#right_frame {
width: 75%;
}
#bottom_frame {
width: 100%;
}
iframe {
box-sizing: border-box;
}
A few changes to your HTML and CSS will allow you to do this by using table display styles with some divs.
http://jsfiddle.net/mwg3j17d/6/
<body>
<iframe id="top_frame" src=""></iframe>
<div class="cols">
<div class="col-left">
<iframe id="left_frame" src=""></iframe>
</div>
<div class="col-right">
<iframe id="right_frame" src=""></iframe>
</div>
</div>
<iframe id="bottom_frame" src=""></iframe>
</body>
#top_frame {
width: 100%;
}
#left_frame {
width: 100%;
}
#right_frame {
width: 100%;
}
#bottom_frame {
width: 100%;
}
.cols {
display: table-row;
}
.col-left, .col-right {
display: table-cell;
}
.col-left {
width: 25%;
}
.col-right {
width: 75%;
}
You could also do it with a table itself.
this is something I thought would be straightforward but turning out to be a bit of a pain. I am trying to center align the Facebook social buttons underneath an icon, you can see it here:
Demo Fiddle
I am a bit stuck for ideas, I have tried forcing it within a div and still will not budge...
<div class="Facebook"><img src="http://creditworksusa.com/wp-content/uploads/2014/03/facebook-icon-png-white.png" width="30"/>
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FRazorRuddockRacing%3Ffref%3Dts&width&layout=button_count&action=recommend&show_faces=false&share=false&height=21&appId=637719322983790" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px; display: block; margin: 0 auto;" allowTransparency="true"></iframe>
</div>
.Facebook{
float: left;
background-color: #3B5998;
width: 50%;
text-align:center;
padding: 20px 0;
}
Adding this will work:
iframe {
display: block;
width: 125px;
margin: auto;
}
However, as more digits are added to the like, your width would need to get bigger too. This isn't really a great solution, but without setting the width you can't really set margin to auto to get this to work.
The Facebook social button is always 124px wide. Just give the iframe a width and center it.
iframe {
width: 124px;
text-align: center;
}
http://jsfiddle.net/ak2om8Lh/1/
Wrap the iframe into a div and add a margin: auto
to center it without changing the containing div width,
that gives you more freedom to position your element.
.frame{
display: block;
width: 100px;
margin: auto;
}