CODEWITHSUNDEEP
htmlcss
Carlos Miguel Colanta
Carlos Miguel Colanta

Reputation: 2823

float left on a responsive video div and a paragraph

Here is what i have so far:

enter image description here

I have a responsive video and a paragraph. What i would like to happen is to have this kind of result:

  1. The text will appear on the right if the size is wide enough.
  2. Text will appear on the bottom if the size is too small.

Here is my fiddle code: https://jsfiddle.net/sLzxs5su/6/

.viddiv{
   float:left; width:50%;  
}

.vidholder{
    position:relative;height:0;padding-bottom:50%;
}

iframe{
    position:absolute; height:100%; width:100%;top:0;left:0;

}

adding float left on the paragraph will make my video disappear for some reason.

Upvotes: 1

Views: 1707

Answers (4)

Lahori
Lahori

Reputation: 1091

Requirement:

  1. The text will appear on the right if the size is wide enough.
  2. Text will appear on the bottom if the size is too small.

Logic: (for requirement 1)

1) use figure element & contain video inside it (html5).

2) use figcaption element after video and declare your text accompanied by <p> tag inside it then declare figure element to occupy 100% width since it is the conainer for video and text both. After that, declare video element width to be 50% (or suit your self). since you want it to left side of text, hence declare it as float:left

3) declare figcaption to take up rest of the width i.e. (since you want it to the right of video for big screens, hence you would have to use float:right

Logic: (for requirement 2)

1) to go for small screens, you need to use media queries and hit minimum width after which layout should change... i.e. max-width: 400px.

2) since you want to bring text to the bottom, you are, technically, asking the text div to take up new row and hence declare this its width to 100%

code:

figure {
    width:100%;
}
figure iframe{
    height:100%; width:50%;float:left;

}

figure figcaption {
    width:50%;
    float:right;
}
@media only screen and (max-width: 480px) {

figure iframe{
    height:100%; width:100%;

}

figure figcaption {
    width:100%;
    text-align:center;
}
}

<div class="vidholder">
<figure>
    <iframe width="480" height="390" src="https://www.youtube.com/embed/hqiNL4Hn04A" frameborder="0" allowfullscreen></iframe>
    <figcaption>
        <p style=" word-wrap: break-word;"> @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</p>
    </figcaption>
</figure>
</div>

updated fiddle

Upvotes: 1

dbp
dbp

Reputation: 373

https://jsfiddle.net/Lgb4de7u/

<div class="column">
    <div class="video-container">
        <iframe width="480" height="390" src="https://www.youtube.com/embed/hqiNL4Hn04A" frameborder="0" allowfullscreen></iframe>
    </div>
</div>
<div class="column">
    <p>@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</p>
</div>

And the CSS here:

.column {
    float:left;
    width:50%;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (max-width:767px) {
    .column {
        float:none;
        width:100%;
    }
}

Upvotes: 0

Corey Bruyere
Corey Bruyere

Reputation: 976

You could use this CSS:

.flag {
  display: table;
  width: 100%;
}

.flag__image,
.flag__body {
  display: table-cell;
  vertical-align: middle;
}
.flag--top .flag__image, .flag--top
.flag__body {
  vertical-align: top;
}
.flag--bottom .flag__image, .flag--bottom
.flag__body {
  vertical-align: bottom;
}

.flag__image {
  padding-right: 10px;
}
.flag__image > * {
  display: block;
  max-width: none;
}
.flag--rev .flag__image {
  padding-right: 0;
  padding-left: 10px;
}

.flag__body {
  width: 100%;
}

With this HTML:

<div class="flag">
  <div class="flag__image">
    <iframe src="https://www.youtube.com/embed/hqiNL4Hn04A" frameborder="0" allowfullscreen></iframe>
  </div>
  <div class="flag__body">
    <p> @@@@@@@@@@@ @@@@@@@@@ @@@@@@@@@ @@@@@@@@@ @@@@@@@@ @@@@@@ @@@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@ @@@@@@@  @@@@@@@@@@ @@@@@@@@@@@@ @@@@@@@@@ @@@@@@@@@ @@@@@@@ @@@@@@@</p>
  </div>
</div>

Upvotes: 1

Gary
Gary

Reputation: 1247

You can use CSS3 Media Queries to solve this
The detail for media queries
And a good tutorial for Responsive Web design

Upvotes: 1

Related Questions