Easy question / frame Vimeo with video inside at 100%

HTML & CSS
1

Hello ! I think it’s an easy issue but it makes 2 days, I gonna be crazy soon
So I have a frame with a Vimeo vidéo inside, the position of the Frame in the column is OK but the Video inside is not 100% width. I don’t manage to change the percentage of the video without changing the frame… Here it is :

Thank you so much :wink:

edit : in fact it doesn’t work I juste f***** what to have a beautiful column with a video with 7% of margin left and write haaaaa

2

Hi there acetteadresse

and a warm welcome to these forums. :winky:

Here is a basic example of "iframe element " control…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

#iframe-container {
    position: relative;
    width: 64%;
    padding-top: 36%;
    margin: auto;
 } 

#iframe-container iframe {
    position: absolute;
    top: 0;
    width: 100%;
    height:100%;
    border: 0;
 }
</style>

</head>
<body> 

 <div id="iframe-container">
  <iframe src="https://player.vimeo.com/video/28164488"></iframe> 
 </div>

</body>
</html>

coothead

2 Likes
3

Here’s a codepen using much the same technique as in the demo above from @coothead.

I’m assuming you wanted something like this:

1 Like
4

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