HTML5: Enhancing Video Playback on the iPad with Custom Zoom Controls

I've customized a smaller UIWebView specifically for the iPad, and I've created my own HTML5 controls for the video playback. However, when I try to maximize the video, all I see is a black screen instead of the actual content. The audio still plays, and I can pause and play the video, but visually it's just black. Additionally, when I go back to the minimized mode, the video disappears completely.

Interestingly, this issue does not occur when accessing the video on a web browser; it seems to be unique to the iPad.

Below is the code snippet used for maximizing the video:

function fullScreenOn(){
    videoIsFullScreen = true;
    videoOrigWidth = video.offsetWidth;
    videoOrigHeight = video.offsetHeight;
    video.style.width = window.innerWidth + "px";
    video.style.height = window.innerHeight + "px";
    video.style.position = "fixed";
    video.style.left = 0;
    video.style.top = 0;
    controls.style.position = "fixed";
    positionController();

    fullScreenControl.className = "fs-active control";
  }

  function fullScreenOff(){
    videoIsFullScreen = false;
    video.style.width = videoOrigWidth + "px";
    video.style.height = videoOrigHeight + "px";
    video.style.position = "static";
    controls.style.position = "absolute";
    positionController();
    fullScreenControl.className = "control";
  }

The 'video' variable refers to my video container element.

If you're curious, here's a snapshot of the issue:

Cheers!

Answer №1

As I delve into a related project, I’ve discovered that changing the position to 'absolute' for the video element leads to the video not appearing on screen anymore.

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

Tips on creating a blurred background effect when an HTML popup modal is activated

Whenever I click on a button, a popup window appears. What I want is for the background to be blurred when this popup modal opens. <div class="modal" id="myModal"> <div class="modal-dialog modal-lg"> <div class="modal-content"> ...

Expanding the width of the containing div using CSS

I have a main container with multiple smaller divs inside it. None of these small divs have specified widths. I want the black div to expand and fill up the entire space, stretching all the way to the ABC div on the right. This only needs to work in Chr ...

Using Vue to showcase the result of a form submission on a separate page

Working with a <form> in the context of vue has been successful as I am able to send the form data to the server, receive a JSON response, and print it on the console. However, my current challenge involves displaying this JSON response on a differe ...

Incorporate an image icon into an Angular grid

Currently, I am in the process of building a web application using Angular. The main goal is to create a grid and color specific cells based on data input. Below is the snippet of my HTML code: <mat-grid-list cols="10"> <mat-grid-tile * ...

PHP Bootstrap Confirmation Dialog Tutorial

Is there a way to implement a delete confirmation dialog? When 'yes' is clicked, the message should be deleted, and when 'no' is clicked, the delete operation should be canceled. At present, this is how it looks in my view: <a href ...

What is the best way to enable autocomplete in AngularJS?

I am working with an object that contains both a name and an ID. I want to implement autocomplete functionality based on the name property. Below is the code snippet that I have tried: //Js file var app=angular.module("myapp",[]); app.controller("controll ...

Unable to transition slides in AngularJS on Safari iOS 9 due to malfunctions

Having some CSS classes that smoothly slide my ng-view left and right during route change, everything was working well on most browsers and phones until now. Under ios 9, the animation is not functioning properly. Instead of sliding left to right, the view ...

Is there a way to prevent javascript from automatically inserting tags when selecting text?

If you want to view the Fiddle Here Essentially, it's a text-highlighting tool that works almost flawlessly. The problem arises when it encounters tags like <p> or <br> within the selection. The JavaScript code seems to automatically in ...

JavaScript function failing to properly handle PHP array input

I am facing an issue with a PHP array that I am trying to pass to a JavaScript function using "json_encode($array)". Every time I click the button to trigger the function, the page simply refreshes without any action being taken. I have attempted to troub ...

How come my Ajax call is setting the 'Content-Type' to 'application/x-www-form-urlencoded' instead of 'JSON' as specified in the dataType parameter?

I have encountered an issue while responding to a button click using the code snippet below. The console.log() confirms that the function is being called, but the HTTP request it generates contains the header "Content-Type: application/x-www-form-urlencode ...

Using a forEach loop within the RequestAnimationFrame function

I am currently developing a project using THREEjs and would like to organize it in the following manner: class Blah scene : new THREE.Scene() renderer : new THREE.WebGLRenderer() camera : new THREE.PerspectiveCamera() ...

Invoking a React function repeatedly (every second)

Currently, I am working with React and utilizing Material UI to create a modal. The modal is rendered as part of the body of the code, placed at the bottom of the page. Its visibility is controlled by the state; if it's open or closed. However, I&apos ...

Update article translation dynamically in Vue without needing to refresh the page

ArticleController public function index() { $locale = Lang::locale(); // $locale = Lang::getLocale(); $articles = Article::withTranslations($locale)->get(); return $articles; } resources/assets/js/pages/articl ...

Preflight request rejection due to access control check failure in React and Express

I am facing a similar issue to this question, but my problem is specific to using Express with React on the frontend. The error I am encountering is: Access to fetch at 'http://localhost:8000/api/users/auth/github' from origin 'http: ...

Dealing with the validation of two forms on a single webpage: Strategies and Solutions

In a popup, there are two forms that alternate display - one for editing (loaded via ajax) and one for creation. Using jQuery validation, I aim to show hints for both editing and field submission. The validation includes ensuring time spans do not overla ...

Is it possible to activate or deactivate a button depending on a radio button selection using jQuery?

Below is the code I have written in an aspx file: <asp:Button ID="btn" runat="server" Text="Add As a Sub Organization" OnClick="lnkChild_Click" ValidationGroup="GroupA" class="btn-u" CausesValidation="true" /> <asp:GridView ID="grdDuplicateO ...

What could be causing the server to return an empty response to an ajax HTTP POST request?

Attempting to make a POST request using ajax in the following manner: $.ajax({ type: "POST", url: 'http://192.168.1.140/', data: "{}", dataType: "json", ...

What is the best way to conceal the main list but still show the nested list within?

I'm looking for a way to conceal the main parent of a sub-list while still displaying the nested list. Furthermore, I need to ensure that the parent element doesn't occupy any space on the page when hidden. HTML <ul> <li class="par ...

Validation of dynamically generated name fields using radio button group

CODE: html <form id="myform" type="post"> <fieldset id="myid1"> <input id="entries_8490_burn_id_1" name="entries[8490][burn_id]" value="1" type="radio"/> <input id="entries_8490_burn_id_2" name="entries[8490][burn ...

Gradient transition effect changing background color from bottom to top

I am facing an issue where I have a block and I want the background color to animate from bottom to top on hover. Can you please help me identify what is causing this problem? Your assistance is greatly appreciated. .right-block--wrapper { backgroun ...