Embed a video within an image while ensuring it remains responsive on all devices

I have a picture that resembles something like this one

My goal is to embed a video into it while maintaining its aspect ratio when the screen size is reduced. The responsive design should only affect the width since the image will be displayed in portrait mode on mobile devices.

Unfortunately, I am struggling with implementing this using CSS. I attempted to use absolute positioning and various percentages, but the ratios are not preserved properly when resizing the screen, causing the video to shrink.

htmlcssimagevideoresponsive-design

Answer №1

If you are utilizing the open source HTML5 video player, videoJS, there is a feature called 'Fluid' mode that allows you to maintain a chosen aspect ratio when resizing the video.

You can find detailed configuration instructions here:

Here is an example of how to configure it:

var player = videojs('vid2');

//Enable fluid mode
player.fluid(true);

//Set aspect ratio - 1:1 creates a square in this example
player.aspectRatio('1:1');

//Make the UI responsive
player.responsive(true);

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

Need help addressing a sliding page issue in my Upwork clone script using JavaScript

For those familiar with Upwork's UI, you may have noticed a small feature I implemented. When a user clicks on a freelance job offer, another page opens from the left side using transform: translate(120%) to transform: translate(0). The issue arises ...

javascripthtmlcss

Ways to prevent users from being redirected when they press the back button on a webpage

Similar Question: How can I prevent the back button from working in IE and Firefox? I'm currently working on a single page website (DAM) that requires user authentication to enter. After logging in, if a user clicks the back button, they are dire ...

javascriptjqueryhtmlback-button

Tips for customizing the appearance of Angular Material select drop down overlay

In my project, there is an angular component named currency-selector with its dedicated css file defining the styling as shown below: .currency-select { position: absolute; top: 5px; right: 80px; z-index: 1000000; color: #DD642A; f ...

htmlcssangularangular-material2

Tips for customizing image flipper AJAX code

I am working on a script that swaps the current image with a selected one, but I need to add an attribute so it specifically targets image tags with a certain class SCRIPT---- <script> $(function(){ Test = { UpdatePreview: func ...

htmlajaximage

Crafting a unique image size for an ACF gallery: A step-by-step guide

I'm currently utilizing the capabilities of Advanced Custom Fields to build an image gallery. I originally had the image size set to thumbnail, but when I tried setting it to medium it didn't seem to work, leaving me unsure if there was something ...

phphtmlcssadvanced-custom-fields

Utilizing the dynamic pairing of Three.js and CSS3 to bring life to animated 3D objects

I am currently working on a project that involves creating 3D Lego elements and assembling them into a figure using animation. I have successfully modeled the elements in Blender and exported them as .obj/mlt files without any issues. However, when it come ...

javascripthtmlthree.js3dcss-animations

Tracking Time Spent in a Tab using HTML and JavaScript

I have a unique issue that requires a specific solution. Despite my extensive search across the internet, no useful answers were found. This is the snippet of HTML code in question: <form action="/timer.php" method="POST"> <span>Fir ...

javascriptphphtmlmysql

Adding an image within the body of text in a Django model, where both the text and image coexist

I am currently seeking a method to seamlessly insert an image within the text of my Django-powered blog. My goal is to achieve a layout similar to the one showcased in this example: https://i.stack.imgur.com/cFKgG.png The desired layout consists of two c ...

javascriptpythonhtmlcssdjango

How can I make the lines of my drawer thicker in Material UI?

Currently, I'm in the process of implementing a left-side navigation bar for a web application I'm developing. The main challenge I'm facing is customizing the styles as desired when using the Drawer component. Specifically, I'm aiming ...

javascripthtmlcssmaterial-ui

Showing a loading animation inside an HTML element

I have a main webpage that contains several buttons. Each button, when clicked, loads a specific target page as an object within a div on the main page. The "target" refers to the page that will be displayed within the object. <script> .... chec ...

javascripthtml

I'm having trouble keeping my navbar fixed

Having trouble keeping my navigation bar fixed I attempted using the <nav class="fixed-nav-bar> with no success. I also tried adjusting it in CSS, but it still wouldn't stay fixed. <nav role="navigation" class="navbar navbar-default"> ...

javascripthtmlcss

Chakra UI: Trouble with Styling Multi-part Components - StyleProvider Missing

Attempting to style multipart components as outlined in this documentation is proving to be challenging. Despite my efforts, I keep encountering the following error: ContextError: useStyles: styles is undefined. It appears that I may have forgotten to wr ...

cssreactjsnext.jschakra-ui

Capture various data points in an array with each click

I am currently working on a menu of buttons where users can select multiple options at the same time. My goal is to record all selected buttons in one array instead of individual arrays for each button. The end result I hope to achieve is an array like t ...

javascripthtmljqueryarrays

Implementing a Popover Notification When Clicked

I'm a beginner at this. I came across an example of a popover message box in the link provided below. I attempted to implement it, but for some reason, it's not working. Could I be overlooking something? Alternatively, is there a simpler way to ...

javascriptjqueryhtmlcsstwitter-bootstrap

Instructions on how to make a radio button selected when clicked are as follows:

My radio button is currently checked, but I would like it to be onclicked because there is a Javascript function that uses the on.click function. Are there any possible methods or examples to achieve this? <label style="margin-left:177px;">Order Ty ...

javascripthtml

When it comes to using brackets and HTML, I keep receiving an error message indicating that there is no index file

I'm having trouble with this code - it works fine in Code Academy, but I am new to HTML and trying to practice outside of the platform. Every time I try to live preview in Brackets, I get an error message saying "make sure there is an html file or tha ...

htmlcss

Achieving 10 touchdowns within a set of 5 plays during a football game

Receiving a page from an external site where I have no control. The table structure is as follows: <table><tbody> <!-- headers --> <tr><td></td> <td></td> <td></td> <td>< ...

javascriptjqueryhtml

grid causing images to display incorrectly in incorrect positions

My project consists of 3 component files and a CSS file, but I am facing an issue where the Tiles are slightly off in their positioning towards the top left corner. Although no errors are being thrown, upon using the view grid feature in Firefox, it is ev ...

javascriptcssreactjscreate-react-app

Ascending to the Peak within a div

<script type="text/javascript"> $(document).ready(function(){ updateContent(); }); function updateContent(){ $('#mainDiv').load('home.php', function(){ scrollToTop(); }); } ...

javascriptjqueryhtmlcss

What is the process for encoding images in HTML code?

Is there a method to embed a background image directly in the HTML code? For instance: background-image: url(data:image/gif;base64,XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX); If I have an image file, can I encode its data and t ...

csshtml