Embed peertube video

Help
,
1

Hello everyone! :slight_smile:

What’s the proper syntax to embed a peertube video with full width and height into a post, being responsive at the same time?

I tried several variations, but nothing worked good…

Thanks in advance for your time!

2

Seems like I found online a possible solution…

Just add some CSS:

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

…and surround your iframe with the above class, like this:

<div class="videoWrapper">
<iframe src="https://open.tube/videos/embed/f64c2aa0-5bef-4564-b5ed-483b99f7b2bc?title=0&warningTitle=0" frameborder="0" allowfullscreen></iframe>
</div>

If you find a better solution, please let me know… :wink:

3

Glad you found something that works @koulaxizis ! CSS is certainly the way to go here.

One thing I would suggest trying is a simplified version of the CSS - removing the class and just adding some CSS to address the iframe element. What I’ve seen work before with videos is this:

iframe {width: 100%}

That should do the trick, but if not you can simply add the other properties that you have in your iframe code above. This way all you have to do is embed the Peertube video without having to then wrap it in a div. Just saves a little bit of time. Let me know if any of that works!

4

This didn’t work, unfortunately.

Could you please help me on how to include my used code on a simple css attributed, as you suggested?

5

Never mind, I spoke to early, I just figured it out! Thanks mate!! :smiley:

1 Like