Incorporate Vimeo video with full-width display

When embedding a Vimeo video on my website, I use the following code:

<div class="fys-fp-content-wrapper">
<div id="fys-fp-video">
</div>
</div>

#fys-fp-video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 600px;
}
#fys-fp-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 600px;
}

The Vimeo iFrame is inserted into #fys-fp-video.

Despite the original width of the video being only 640px, I want it to always be displayed at 100% width, ensuring that it covers the entire width while maintaining the 600px height. Any suggestions on how to achieve this look?

Appreciate any help!

Answer №1

Implementing a responsive video using Bootstrap is quite simple. Here's how:

<!-- Achieving a 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

For more information on this feature in Bootstrap 4, visit https://getbootstrap.com/docs/4.0/utilities/embed/.

To update to Bootstrap 5 and utilize the new helper classes for aspect ratios, check out the guide at: https://getbootstrap.com/docs/5.0/helpers/ratio/#example

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="embed-responsive embed-responsive-16by9">
  <iframe lass="embed-responsive-item" src="https://player.vimeo.com/video/54596361" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>

Answer №2

In my opinion, the solution to your problem lies in using vw (viewport width). When you set width:100%, it means 100% width of the parent element. On the other hand, width:100vw signifies 100% of the screen width. I recommend implementing the following code:

#fys-fp-video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 600px;
}
#fys-fp-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 600px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switch your attention to the following input text using AngularJS

In my controller, I have an object variable called `myObject` with 3 input text fields in the user interface. I am looking for a way to automatically shift the focus to the next input field once the current one reaches its maximum length. var myObject = ...

Accessing deeply nested JSON objects in AngularJS

I've been working on an AngularJS single page application and I have successfully fetched files from a JSON. var app = angular.module("MyApp", []); app.controller("TodoCtrl", function($scope, $http) { $http.get('todos.json'). success ...

Retrieving the selected value from a dropdown menu without having to click on a

I'm facing an issue with 2 dropdown menus outside of an HTML table that is generated by PHP code. There's a submit button within this table, and here's how it's set up: <!doctype html> Select Year: ...

Reduce the length of the text and display it upon hovering with the mouse

I am trying to figure out how to truncate text and have it expand on mouseover in a paragraph element. I attempted to truncate the content using a specific code, but I encountered an issue. While my current code expands the content when clicking on the el ...

Step-by-step guide on using nodemon on a web hosting server

I am currently designing a website that includes a login form and I am in the process of uploading it to a web hosting service In order to activate my login form, I have to use node index Is there a way to change the destination of this tag: <li class ...

The embedded CartoDB image header is set to have a style of "display:none"

I'm currently working on a CartoDB map showcasing my readers' summer fishing photos. Each row in the table has an image url, which I've placed at the top of the infowindow display list. I've enabled it and set the image window type to ...

What is the best way to add padding to each line within a block of text containing multiple lines

My <span> tag has a background color and left and right padding applied to it. However, the padding is only visible at the beginning and end of the <span>, not on each line when the text wraps onto multiple lines. Is there a way to add padding ...

Choose a trio of columns using jQuery

Is it possible to target three specific columns using jQuery or CSS, like this: Take a look at the example code below: <script> //I am attempting to target specific columns with this code snippet $('GvGrid').slice(1, 3).css("backgroundC ...

Submitting an HTML form results in no data being sent

I am currently facing an issue with a form on my website. The form code is as follows: <form action="" method="post" id="login_form"> <input type="text" name="log_login_form"/> <br/> <input type="password" name="log_password_for ...

Attempting to deactivate the bootstrap-fullscreen-select feature using JavaScript

Currently, I am in the process of developing a Python Flask server to manage a project that I have undertaken. While exploring different options, I came across bootstrap-fullscreen-select which turned out to be exactly what I needed for my control page. H ...

Create a dynamic feature that allows users to easily add text fields within a form in

I'm looking to create a form that adds another input text field automatically when the user fills out one. Here is an example of the HTML structure: <form method="post" action="http://localhost/save" class="save"> <fieldset> <div&g ...

What is the best way to make an exit pop up disappear when clicking on any area?

I'm new to programming in JavaScript and jQuery and I wanted to implement an exit pop-up feature. While I came across a helpful tutorial online, I encountered an issue where users could only exit by clicking on the "X" button. I want them to be able t ...

Turn off Chrome Autofill feature when placeholders are being used in forms

I am encountering difficulties with Google autofill for fields that have placeholders. Despite attempting various solutions provided at: Disabling Chrome Autofill, none of them seem to work as needed. The challenge is to create a form with different field ...

"Why is it that only one of the two similar spans with onclick event is not functioning properly

Encountering a perplexing issue that has me stumped. Here's the code in question: js: function Test() { alert("test"); } html: <span id='bla' onclick='Test()'> Click me </span> <hr> <span id='bla2& ...

Using the onclick event with an image created through PHP code

I am currently in the process of developing a dynamic image represented as a graph displaying the number of documents generated each day. This interactive image is being created using PHP, and I aim to improve user engagement by enabling them to click on t ...

How can I close the menu when a menu item is clicked in a React.js application?

I am facing an issue where I want to close the menu when clicking on any menu item in React JS. The functionality works fine with a button icon but not with individual menu items. How can I resolve this problem? I have been trying to implement it using CSS ...

Tips for initiating a function at a designated scroll point on a webpage

Currently, I am testing out a code snippet that allows images to flip through in a canvas element. I'm curious if it's possible to delay the image flipping effect until the viewer scrolls down to a specific section of the page where the canvas i ...

Divided screen showcasing one movable panel

I am currently working on a design where I have a container with a specified maximum height. Inside this container, there are two separate divs. One of these divs (the footer) has a fixed height of 55px, while the other is a scrollable div that adjusts its ...

Tips for enhancing this CSS design to resemble a table

I am a beginner in working with CSS layouts for websites and I have implemented the following code that serves my purpose. Although it is currently functional, its functionality does not necessarily mean that it is well-written. Could someone review this ...

Endless loop of jquery textbox focus event

Currently, I am employing jQuery for validating textbox values. I have two textboxes - txt1 and txt2. For this purpose, I have created a jQuery function: $("#txt1").blur(function () { if ($("#txt1").val() == "") { $("#scarrie ...