Short Blog posts with img/iframe video and bottom line disalign

[panmeri]

Hello,
When a Blog post is quite short and you add an image or an iframe (like a youtube video share) image or iframe overlaps bottom line of the post.
With images looks like adding some blank lines works fine, but I am afraid that with iframes it is not so easy.
Any idea how to cope with that?

See http://hurligurli.net/www.trst80.com/ for an example, Blog post title “Predavanje Time Laps” further down the page …

Thanks a lot, Igor

[panmeri]

The same blog post but in italian language works fine with just a new line under the text …
http://hurligurli.net/www.trst80.com/it/

???

[ArmendHajdari]

Hi, @panmeri

100% Width YouTube iFrame Embed

<div class="container">
<iframe src="//www.youtube.com/embed/https://www.youtube.com/embed/Scxs7L0vhZ4" 
frameborder="0" allowfullscreen class="video"></iframe>
</div>

Add in the CSS:

.container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Kind Regards,
Armendi

[ArmendHajdari]

Or, Download YouTube - Plug-in

[panmeri]

Hello @ArmendHajdari,
thank you very much for your hint.
For now I just applied some padding-bottom as in your suggestion and that pushes the lower border down - and that is nice. What I do not understand though is the fact, that the blog posts (first paragraph three lines, second paragraph one line) with the iframe are written, configured and styled the same, but behave differently:
I have to add padding-bottom: 50px to http://hurligurli.net/www.trst80.com/
and I added padding-bottom: 35px to http://hurligurli.net/www.trst80.com/it
to have the same effect. Isn’t this strange?

I will check the other settings with the div later …
Are you perhaps suggesting that it is not possible to have an iframe floating beside the text?

And thanks a lot for the hint about the youtube plugin … I did not see that first.
I will certainly try it out.

Thanks and kind regards, Igor

[panmeri]

Unfortunately that does not work nicely with Chrome/Win.
Still the posts behave differently between languages …
Will try that div suggestion.

The plugin is nice and easy use, but looks like it does not support floating.

Thanks, Igor