Adding space between <iframe>

HTML & CSS
1

Hi

I’m working in my firm’s CMS trying to add some horizontal space between three <iframe>'s which contain Vimeo videos. Is it possible to do this without using forced letterspaces (which the CMS removes automatically)?

I’d also like to align a link to the video transcript for each video under each <iframe> but without access to the CSS it’s proving to be a difficilt task.

I’m trying to avoid the use of layout tables for this task as tables aren’t constrained to the device width on phone, so left/right scrolling is required. Here’s a sample of the code i’m using for the <iframe>;

<div style="text-align: center;">
<iframe src="https://player.vimeo.com/video/12121212" width="250" height="141" frameborder="0" title="Video 1"></iframe>
<iframe src="https://player.vimeo.com/video/13131313" width="250" height="141" frameborder="0" title="Video 2"></iframe>
<iframe src="https://player.vimeo.com/video/14141414" width="250" height="141" frameborder="0" title="Video 3">
</iframe>
</div>

We have a need to ensure accessibility at WCAG Level AA for all our content.

Thanks in advance.

2

Three methods spring to mind and no doubt there are many more :slight_smile:

Method 1:

Add &nbsp;&nbsp;&nbsp; between first and second iframes.

Method 2:

Add style=“margin-right: 3em;” to first and second iframe

Method 3. - preferred option

Add an id or class to the parent div and the relevant CSS script in the stylesheet.

Edit:

A warm welcome to the forum.

1 Like
3

Hi garyminato,
Flexbox can do everything your wanting very effectively.
Something like this should get you pointed in the right direction.

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
.videos {
  display:flex;
  justify-content:center;
  flex-flow:row wrap;
  list-style:none;
  margin:0;
  padding:0;
}
.videos li {
  margin:1em;
  display:flex;
  flex-flow:column;
  align-items:center;
}
.videos a {
  margin:.5em 0;
}
</style>

</head>
<body>

<ul class="videos">
  <li>
    <iframe src="https://player.vimeo.com/video/12121212" width="250" height="141" frameborder="0" title="Video 1"></iframe>
    <a href="#">video transcript</a>
  </li>
  <li>
    <iframe src="https://player.vimeo.com/video/13131313" width="250" height="141" frameborder="0" title="Video 2"></iframe>
    <a href="#">video transcript</a>
  </li>
  <li>
    <iframe src="https://player.vimeo.com/video/14141414" width="250" height="141" frameborder="0" title="Video 3"></iframe>
    <a href="#">video transcript</a>
  </li>
</ul>

</body>
</html>
2 Likes
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.