Ziggeo video - Creating a responsive design for videos

Trying to achieve full responsiveness with Ziggeo videos has been challenging. Despite numerous attempts, the only result I'm getting is a fixed width. What I really need is for Ziggeo videos to adapt to 100% width and display correctly on various mobile devices.

Below is an example of the code I have been using:

<ziggeo
  ziggeo-video="_sample_video"
  ziggeo-width=320
  ziggeo-height=240>
</ziggeo>

The width and height are set in pixels, and I haven't found a way to specify percentages.

For reference, here is a link to an example:

If anyone has any insights on how to make Ziggeo videos fit 100% width using CSS, HTML, or JavaScript, I would greatly appreciate it.

Thank you!

javascripthtmlcssziggeo-sdk

Answer №1

There is a responsive parameter available for Ziggeo integration, which can be found at this link.

To implement this parameter, you can use the following code:

<ziggeo
    ziggeo-video="_sample_video"
    ziggeo-responsive>
</ziggeo>

It is recommended to consider using the v2 version of the player and recorder instead of v1 for better responsiveness on mobile devices. The v2 version, developed by Ziggeo, is more advanced compared to v1.

The code for v2 implementation would be as follows:

<ziggeoplayer
    ziggeo-video="_sample_video"
    style="width:100%; height:100%">
</ziggeoplayer>
  • Note that additional parameters may not affect the code, so any styling in the form of inline styles or classes will remain intact.

For the recorder, simply replace <ziggeoplayer> with <ziggeorecorder> while utilizing the responsive parameter.

Using the responsive option along with custom styling through CSS can enhance the visual appeal of your integration.

Additionally, there is a dropdown menu on the documentation page (link here) that allows for switching between v1 and v2 versions.

UPDATE (post-publishing): - Note that browser-specific styles and user-defined CSS can impact the appearance of elements integrated with Ziggeo. If you notice any unwanted whitespace, ensure that appropriate CSS adjustments are made.

Answer №2

Why not give this a shot:

$( window ).resize(function() {
  var screenHeight = window.innerHeight;
  var screenWidth = window.innerWidth;
  $('#videoElementId').prop('ziggeo-width', screenWidth);
  $('#videoElementId').prop('ziggeo-height', screenHeight);
});

While there may be an API available in Ziggeo to simplify this process, the code provided above serves as a good starting point.

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

Transform the MySQL query to fetch the highest date for each user ID and then convert it into a sequelize query

Below is the MySQL query I'm working with: SELECT a.id, a.name, a.pname, b.skill, date_add(a.end_date, interval 1 DAY) AS available_date FROM (SELECT user.id, concat(user.first_name, " ", user.last_nam ...

javascriptmysqlsqlnode.jssequelize.js

Find out if two HTML elements are distinct without using their ID attributes

Is there a way to detect if two references to the same HTML element exist without the ID property being set? For example, with checkboxes declared as follows: <input type="checkbox" class="RowSelector" /> In the code snippet below, the goal is to c ...

javascriptjqueryhtml

Are you looking to generate a dynamic element (like a div) within a React application and then embed another React app within it?

I am in the process of developing a chat application using react-redux. This chat application is designed to handle multiple interactions concurrently, allowing users to switch between them seamlessly. class Chat extends React.Component { render() { ...

javascriptformsreactjsiframereact-redux

Tips for effectively utilizing a cart collection system

I am currently exploring how to utilize sessions for user tracking and updating my cart collection. Below is the code from my route.js file in an Express and Node application: app.post('/cart/:id', function (req, res) { if (!userKey) { ...

javascriptnode.jsexpress

What is the rationale behind allowing any type in TypeScript, even though it can make it more challenging to detect errors during compile time?

Why is it that all types are allowed in TypeScript? This can lead to potential bugs at runtime, as the use of type "any" makes it harder to detect errors during compilation. Example: const someValue: string = "Some string"; someValue.toExponentia ...

javascripttypescriptdebugging

Utilize the splice function when resizing the window based on specific breakpoints

On a series of div elements, I have implemented some JS/jQuery code that organizes them by wrapping every three elements in a container with the class .each-row. <div class="element"></div> <div class="element"></div> <div class ...

javascriptjqueryhtmlcss

What occurs when a function component is passed as a state variable?

Can a function component be passed as a state variable? Is it possible for the code below to work correctly? I attempted it but encountered an error stating props.children isn't a function. Do you know if this approach can be successful? const App = ...

javascriptreactjs

Switch between divs using an update panel

Consider this scenario: Numerous div controls are present on an aspx page, and update panels are being used to prevent page refresh. These divs contain various controls like buttons and textboxes: <asp:UpdatePanel ID="UpdatePanel1" runat="server"> ...

javascriptjquerycssasp.netajax

Omit the <span> tag when exporting to XLS format

Currently, I have a functioning jQuery DataTable that utilizes the TableTools plug-in and includes <span> elements in one of the columns for each row. When clicking on the export button, my goal is to exclude or hide the <span> elements from t ...

javascriptjquerydatatablestabletools

Concealing elements with duplicate attributes using jQuery

Is there a way to hide duplicate elements in a list based on a specific attribute value using jQuery? Here is an example list: <div data-title="big hero 6">title</div> <div data-title="big hero 6">title</div> <div data-title="a ...

javascriptjquery

Display a dynamic indicator on the map

I am working on a project where I need to make a marker move smoothly on the map as a vehicle travels along the road. There are two sets of latLng values, and I want the marker to smoothly transition between these two points until the next set of coordina ...

javascriptjquerygoogle-mapsgoogle-maps-api-3cross-browser

Trouble with the visibility and functionality of the Bootstrap navbar collapse icon

I'm currently working on a project where I want to incorporate a collapsible navbar. The issue I'm facing is that when I resize the window, the navbar collapses but the button, although clickable, does not display or provide me with any options. ...

htmlcsstwitter-bootstraptwitter-bootstrap-4

Connects URLs to the displayed outcomes in jQuery Auto-suggest Interface

This particular code snippet has been modified from a tutorial on jQuery autocomplete <!doctype html> <html lang="en> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> ...

javascriptjquery

Connect the visibility of one object to the visibility of another object

How can I make DOM-element a visible when DOM-element b is visible, and hidden when b is hidden using jQuery? I'm seeking a solution to achieve this effect. Is there a way to accomplish this with jQuery? Thank you in advance! To clarify my question ...

javascriptjqueryhtml

Sketch a ring outlining the clusters of nodes

I am working with a vis-network in which I have divided nodes into 2 groups - left and right. I achieved this by arranging the node positions using layput_as_tree. Now, I want to visually distinguish these groups by drawing a circle or ellipse around the ...

javascriptrshinyvis.jsvisnetwork

I have been working on developing a Chrome extension for a StopWatch, but I am facing an issue where the Stopwatch resets automatically whenever I click

I am currently working on a stopwatch chrome extension and facing an issue where clicking anywhere outside the extension popup resets the stopwatch to zero. I would like the stopwatch to keep running until I manually stop it or close the browser. Can someo ...

javascripthtmlcssgoogle-chrome-extension

The selector bar in Cypress does not work properly when trying to find the text 'foo' using jQuery

Having trouble with jQuery selectors in my Cypress tests. I often need to use jQuery selectors to locate elements based on text or unique generated numbers instead of using cy.contains(). Any help would be greatly appreciated! https://i.sstatic.net/FjqzJ ...

javascriptjquerycypressselector

Unexpected behavior observed with negated character: ? ^

I am looking to create a form where users can input their phone number and have the flexibility to choose how they want to separate the numbers. I have been using a regex pattern for validation: var regex = /[^0-9 \/-\\\(\)\+ ...

javascriptregexregex-negation

Received an unexpected or undesired result from using fetch()

I recently set up a fake API on my local network using the Express Node.js framework. Everything was working fine, and I could see the expected results in the Chrome browser. app.get('/getEntry/:key', (req, res) => { res.send(getEntry(req.par ...

javascriptnode.jsexpressurl

Express 4 : In order to pass a variable from app.js to my routes, I have it configured and ready to be sent over

Recently, I made some updates to my app.js file using Express generator. Below is a snippet of the changes: app.js var express = require('express'); var socket_io = require( "socket.io" ); var app = express(); // Socket.io var io = socket_io( ...

javascriptnode.jsexpresssocket.io