Utilize the HTML5 video tag with a width set to 70%

I'm looking to create a video element that is 70% of the screen width, while maintaining a height aspect ratio of 100%. Currently, I have a video background that spans the full width.

Using Bootstrap v4.

<body>
 <video poster="assets/img/gpd.jpg" id="bgvid" playsinline autoplay muted loop>
<source src="assets/video/gpd_video.webm" type="video/webm">
</video>
<div class="site-wrapper">
 <div class="site-wrapper-inner">
  <div class="cover-container">
    <div class="masthead clearfix">
      <div class="inner">
        <h3 class="masthead-brand">Cover</h3>
        <nav class="nav nav-masthead">
          <a class="nav-link active" href="#">Home</a>
          <a class="nav-link" href="#">Features</a>
          <a class="nav-link" href="#">Contact</a>
        </nav>
      </div>
    </div>
    <div class="mastfoot">
      <div class="inner">
        <p></p>
      </div>
    </div>
  </div>
 </div>
</div>
</body>

CSS:

 video { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;   
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    transition: 1s opacity;
}  

This is the desired result:

https://i.sstatic.net/vh4WK.jpg

Could this be achieved?

Answer №1

video { 
    position: fixed;
    top: 50%;
    left: 50%;

min-width: 70%;

    min-height: 100%;
    width: auto;
    height: auto;   
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    transition: 1s opacity;
}  

//It is advisable to utilize this css code recommendation. By setting min-width to 70%, your video will occupy only 70% of the viewport size :)

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

What is the significance of AngularJS in crafting Single Page Applications?

My introduction to AngularJS was discovering its perfection for Single Page Applications (SPAs). I'm intrigued by what this means and eager to learn more about it. Can someone explain the significance of SPAs in relation to AngularJS? ...

Encountering an error while trying to import GraphQL resolvers and schema

Upon attempting to start the server with the following setup, an error is encountered: Error: "createUser" defined in resolvers, but has an invalid value "function (userInput) {... The resolver's value must be of type object. index.ts const schema ...

In Vue Js, the function createUserWithEmailAndPassword does not exist within _firebase_config__WEBPACK_IMPORTED_MODULE_3__.default

My createUserWithEmailAndPassword function seems to be malfunctioning. Here is the code snippet I am using - config.js import firebase from 'firebase/app' import 'firebase/firestore' import 'firebase/auth' const firebaseCon ...

What is the hierarchy for displaying elements depending on the props?

I have developed a search input component that includes an icon which I want to reposition (either on the left or right side) depending on different scenarios. This input is part of a bootstrap input-group, so modifying the order of elements within my di ...

Finding out if an array is empty or not in Reactjs: A Quick Guide

I am currently working with Reactjs and Nextjs. I am using axios to fetch data, and I need a way to determine if the array (students.data) is empty before running a map or loop. How can I achieve this? Here is the code snippet I am working with: const [stu ...

Instead of using a v-if condition, add a condition directly in the Vue attribute

Apologies for the unclear title, as I am unsure of what to name it with regards to my current issue, I am attempting to create a component layout using vuetify grid. I have a clear idea of how to do this conventionally, like so: <template> <v-fl ...

Is the order of elements in a CSS file important?

In my situation, I am dealing with a nested list and enclosing div that was created by Drupal's menu system, so I am unable to modify it. My goal is to replicate the menu from a hardcoded website (link removed). How can I include the sub-items (ul l ...

Is it possible to use CSS to create a gap between the cursor and the placeholder text within an input field?

Could you please assist me with a bug I have encountered on an older version of Firefox for OSX (37.0.2)? I have included a screenshot of the issue here: https://i.sstatic.net/dzK0G.png Is there a way to use css to move the first character of the placehol ...

Repetitive Anchor IDs and Web Standards Compliance

Today, I encountered the task of converting outdated attributes on a page to make it more XHTML friendly. This led me to consider the anchor tag and its usage: Initially, I had anchor tags in the form of <a name="someName"></a>. However, upon ...

What is the best way to create an oval-shaped background for a div element?

Can someone help me achieve an oval shape for my index page div? I tried using border-radius but the edges are too round for my liking. I am looking for a more specific result See the CSS code below for reference <div class="home-page"></div> ...

CSS Transition not activating upon initial mouseover

My attempt at a simple transition is not working properly on Safari. I am trying to change background images from A to B on hover, but the transition is not smooth when I first hover over the element. Instead of gradually fading in/out, it instantly change ...

What sets apart an object within the scalajs scope from the exact same object within the js.global scope?

Attempting to create a basic example for rendering a cube using the THREEJS library. package three import org.scalajs.dom import scala.scalajs.js import scala.scalajs.js.Dynamic._ import scala.scalajs.js.annotation.JSName ... object ThreeExample { d ...

Whenever the refresh parameter is activated on the initial jsp page, it triggers a refresh for all jsp pages

Currently, I am facing an issue where I am trying to refresh just the starting page named "1.jsp". The goal is to call some functions on this page and then redirect to another jsp page, "2.jsp", once a certain condition is met. However, I have noticed that ...

The button fails to trigger the AJAX request

I've developed a form that includes a QR code generator. The QR code is generated as an SVG, and below the code is a download button that should trigger an AJAX call to my PHP script when clicked. However, the download button does not seem to initiate ...

Is there a advantage to using Angular's component style encapsulation for improved performance?

Recently, I came across the styling methods of Angular 2 which allows you to directly include your styles within the component. If you want to explore more on this topic, check out loading styles. There are two options for style encapsulation in Angular 2 ...

The use of res.sendFile() in node.js is not recognized

While utilizing node.js along with mySQL, I encountered a problem. Upon starting the server, everything seems to be fine. However, upon accessing 127.0.0.1:3000, an error message stating that res.sendFile() is not defined appears. My intention is to send ...

Align multiple elements in a responsive fixed container

I have been attempting to center multiple elements, including images and buttons, within a fixed div at the top of the screen. Despite trying various tricks I found online, none seem to be effective. My goal is to ensure that the alignment works seamlessly ...

Tips for configuring Visual Studio Code to utilize path mappings for handling automatic imports

In order to streamline my project and avoid messy paths, I am implementing absolute paths that will allow for consistent imports regardless of the file's location in the project tree. For this purpose, I made adjustments to the tsconfig.json: "paths ...

Implement an innovative solution to automatically close the navbar component in tailwindcss on

I've been attempting to create a unique tailwind navbar component for React, but I've encountered issues when trying to make it close on scroll for mobile view. I found the initial code on this website. After that, I tried implementing the code ...

Utilizing AJAX to dynamically update a DIV element in CodeIgniter's controller

I need to continuously update a small chat between two users every minute. The functionality is working, but I am struggling with implementing an AJAX call to update the DIV that displays the messages. var interval window.onload = function(){ interval ...