Adjusting the size of a Youtube iframe when the superview is modified with WKWebview

While working with a WKWebview that has an embedded YouTube video using their JS SDK, I encountered an issue. My setup includes three different views - internal container, full-screen container, and external (airplay mirroring) container where the WKWebview can be displayed.

I am able to load the video into the WKWebview and move it from internal to full-screen view or airplay view without any problem. The video resizes as expected in these scenarios. However, when trying to move back from full-screen to internal or airplay to internal, the video does not resize 5 out of 6 times.

Interestingly, the same container code works perfectly fine when running the video in a UIWebView. It seems like there is some weird behavior specific to WKWebview in this case.

Has anyone else experienced similar issues?

javascriptiosiframevideoyoutube

Answer №1

After some investigation, I discovered that there were two key factors at play:

  1. It became clear that the <head> section of the page housing the video needed the addition of:

<meta name="viewport" content="initial-scale=1.0" />

  1. Strangely enough, when a view acted as both a container and a property on the controller, sending updates about its size change throughout, everything functioned harmoniously.

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

Error retrieving api data following update to date format

After making some adjustments to the date format required by a railway API, I am facing an issue where no train data is fetched upon clicking the submit button. Below is the code snippet: searchTrain(e) { e.preventDefault(); let journeyDate = ...

javascriptreactjsapi

Transform the arrow function into a standard JavaScript function

Here is the React return code snippet I'm working with: return ( <div className='App'> <form onSubmit={this.submit.bind(this)}> <input value={this.state.input} onChange={(e) ...

javascriptreactjsarrow-functions

Steps to generate an error in the 'response' function of a $httpProvider interceptor

I am currently working on creating a custom HTTP interceptor in Angular and I am looking to generate an error from the response of the $httpProvider interceptor. According to the provided documentation: response: Interceptors are triggered by the http re ...

javascriptangularjsangular-http-interceptors

Error with font import causing hydration issue in NextJS

Font integration dilemma: import { Lexend } from 'next/font/google'; const lexend = Lexend({ subsets: ["latin"] }); Incorporating the font: const SplashPage = () => { ... return ( <html lang="en" className={lexend.cla ...

javascriptreactjsnext.js

Leverage autoplay feature in HTML5 audio to start streaming your favorite radio station

I am currently facing an issue with trying to automatically launch a webradio on my HTML file. Despite using autoplay, the radio fails to load data in time causing the autoplay feature to be blocked. To tackle this problem, I implemented a setTimeout funct ...

javascripthtmlhtml5-audiointernet-radio

Difficulty with memory leaks in CIContext within Xcode 9 using Swift

Encountering a memory leak issue when utilizing CIContext.createCGImgage on Xcode 9. Specifically, when capturing an image from the camera, it consumes excess memory leading to app crashes. Below is the code snippet: let ciContext = CIContext() func call ...

iosarraysswiftxcode9

Tips for modifying CSS when a user scrolls beyond a specific div

Currently, I am working on implementing a scroll function that dynamically moves elements based on the user's scrolling behavior. The code I have written works to some extent and successfully moves the elements. However, my goal is to create a list o ...

javascriptjqueryhtmlcss

Contrast the text within two div elements using jQuery and modify the color of any identical words

i have a pair of div's with sentences inside first div: i keep an expensive pen in my pocket. second div i own an expensive watch. given the above two divs, I aim to compare the sentences and identify the common words present in both. ...

javascriptphpjqueryhtml

The outputs of base64(sha256(data)) from nodejs crypto and CryptoJS are showing discrepancies

In my setup, I have a node server and a react-native app. The node server utilizes the crypto module for all cryptographic operations, while the react-native app relies on the crypto-js library due to the unavailability of crypto. You can find a sample co ...

javascriptnode.jscryptojsbase64url

verifying the presence of a string or value within an array

I'm currently working on a feature that involves adding an element to an array by typing something into a text field and clicking a button. I've also implemented an if statement to check if the input already exists in the table, and show an alert ...

javascriptjquery

Error encountered with the OpenAI Chat Completions API: "The request could not be completed, status code 404"

Currently, I am in the process of developing an application similar to ChatGPT using React and Axios for API requests to OpenAI's Chat Completions API. However, I have hit a roadblock as I keep encountering a 404 error when attempting to make a reques ...

javascriptnode.jsreactjsopenai-apichatgpt-api

What could be causing this test to fail when testing my API endpoint?

Why am I encountering this error? Uncaught exception: Error: listen EADDRINUSE: address already in use :::3000 import supertest from "supertest" import axios from "axios" import app from ".." const request = supertest(app ...

javascriptnode.jsexpressjasmine

Receive and process messages from RabbitMQ in a Node.js application

I am currently working on consuming messages from RabbitMQ in Node.js and so far, everything is going smoothly. During the message consumption process, I am performing some operations (such as API calls). Now, my goal is to only acknowledge the message o ...

javascriptnode.jsrabbitmq

Navigating to a specific div within a component in Vuejs 2: Steps for routing

These are the routes I've set up for my application: const router = new VueRouter({ mode:'history', routes:[ { path:'/home', name:'home', component: Home }, { path: '/serv ...

javascriptlaravel-5vue.jsvuejs2vue-router

The lower section of the scrollbar is not visible

Whenever the vertical scroll bar appears on my website, the bottom half of it seems to be missing. For a live demonstration, you can visit the site HERE (navigate to the "FURTHER READING" tab). HTML: <!DOCTYPE html> <html lang="en"> <h ...

javascriptjqueryhtmlcss

Utilizing AngularJS to calculate elapsed time and continuously update model and view accordingly

Situation Currently, I am interested in developing a web application that tracks a specific data set based on the time since the page was loaded. For example, "how many calories have you burned since opening this webpage?" I am still trying to grasp the ...

javascriptangularjstimertimeout

Assistance with Javascript, AJAX, and PHP

Within my MYSQL database, I have a table named Messages with the following structure: Messages MessageId (Primary Key) int(10) - auto_increment Message varchar(100) In my PHP code, I've written a script that retrieves and displays a specific message ...

phpjavascripthtmlajaxdatabase

I attempted to initiate a transition using JavaScript, but unfortunately it failed to execute

Hey there! I'm just starting out with HTML, CSS, and JavaScript, and I've been trying to make a transition work using JavaScript. The element I'm working with is a "menu-icon" which is a span tag with a small image nested inside another div ...

javascriptcsscss-transitionstransform

Stop the execution of the JavaScript function when clicked

Greetings, as a newcomer to the realm of JavaScript and AJAX, I am seeking assistance with a specific function on this page. The concept revolves around triggering different JavaScript functions based on user interaction with an image map. Initially, when ...

phpjavascriptajax

The input type '{}' does not match the expected type 'Readonly<IIdeasContainerProps>'. The property '...' is not found in the type '{}'

Having recently started using TypeScript, I'm encountering some issues when attempting to execute this code snippet. Error The error message reads as follows: Failed to compile 13,8): Type '{}' is not assignable to type 'Readonly &l ...

javascriptreactjstypescript