Video margins within a webview

After numerous attempts to embed a YouTube video in a WebView, I'm still struggling with a persistent small margin on the right side of the video.

I've researched similar issues and attempted to address it through JavaScript adjustments without success.

Below is my current code snippet:

           video = (WebView) v.findViewById(R.id.videoview);

    // video.getSettings().setLoadWithOverviewMode(true);
    // video.getSettings().setUseWideViewPort(true);

    String widthAndHeight = "width='null' height='null'";
    String videoURL = "http://www.youtube.com/v/DZi6DEJsOJ0";

    video.setHorizontalScrollBarEnabled(false);
    video.setVerticalScrollBarEnabled(false);

    video.getSettings().setJavaScriptEnabled(true);
    video.getSettings().setPluginsEnabled(true);

    String temp = "<object "
            + widthAndHeight
            + ">"
            + "<body style='margin:0;padding:0;rightmargin:0'>" 
            + "<param name='allowFullScreen' value='true'>"
            + "</param><param name='allowscriptaccess' value='always'>"
            + "</param><embed src='"
            + videoURL
            + "'"
            + " type='application/x-shockwave-flash' style='margin:0;padding:0;' allowscriptaccess='always' allowfullscreen='true'"
            + widthAndHeight + "></embed></object>";

    video.loadData(temp, "text/html", "utf-8");

In attempting to resolve this issue, I included the 'style: body=0'margin=0' tag within the JavaScript. Unfortunately, due to debugging on my phone, I am unable to provide a screenshot. However, the video appears with a margin of approximately 6 pixels on the right side while the left side and top remain aligned with the screen.

Answer №1

When working with HTML, it's important to remember that elements are left-aligned by default. If you're experiencing issues with margins on the right-hand side, setting "margin: 0" can often resolve the problem. However, simply adjusting the right-hand margin to 0 may not fully address the issue of object alignment.

Consider using the following code snippet:

+ " type='application/x-shockwave-flash' style='margin:0;width:100%;padding:0;' allowscriptaccess='always' allowfullscreen='true'"

If setting the width of the embed element to 100% doesn't produce the desired result, try specifying the width based on the device screen's dimensions instead. Additionally, be sure to account for changes in orientation and update your code accordingly.

Answer №2

After extensive research and troubleshooting, I have finally cracked the code on how to make this work. For anyone who may need it in the future, here is the functional snippet:

            Display display = getActivity().getWindowManager().getDefaultDisplay();
    int width = display.getWidth();
    int widthdp = (int) (width / getResources().getDisplayMetrics().density);
    int height = display.getHeight();
    int heightdp = (int) (height / getResources().getDisplayMetrics().density);


    String widthAndHeight = "width=" + widthdp + "height=" + heightdp;

    String temp = "<object "
            + widthAndHeight
            + ">"
            + "<body style='margin:0;padding:0;'>"
            + "<param name='allowFullScreen' value='true'>"
            + "</param><param name='allowscriptaccess' value='always'>"
            + "</param><embed src='"
            + videoPoP
            + "'"
            + " type='application/x-shockwave-flash' style='margin:0;padding:0;' allowscriptaccess='always' allowfullscreen='true'"
            + widthAndHeight + "></embed></object>";

    video.loadData(temp, "text/html", "utf-8");

The challenge stemmed from accurately fetching the screen's width and height without complicating the density pixels and standard pixelation issues.

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

Bidirectional communication between two AngularJS scopes or controllers utilizing a service

I am facing numerous situations where I require clicks or other interactions to trigger actions in a different area of the webpage (one-way communication). Now, I have encountered a need for bidirectional communication, where changes made in element A can ...

Unlock the potential of JavaScript by accessing the local variable values in different functions

I've been struggling for days to find a solution to this issue... https://i.stack.imgur.com/KDN7T.jpg https://i.stack.imgur.com/tOfCl.jpg The image above illustrates the challenge I'm facing - trying to apply data values from elsewhere to the ...

The NativeEventEmitter module in React Native is failing to emit events

I'm in the process of converting a module to Java, specifically this one: https://github.com/dehy/react-native-radio-player After creating a new module within my repository, I've encountered issues with receiving events from ExoPlayer. Here&apos ...

Issue between Promise and EventEmitter causing race conditions in ExpressJS

Currently, I am working on a NodeJS/Express web application where users can upload files that are then parsed using the connect-busboy module and saved to a database with Sequelize. Once the data is stored, I aim to redirect the user to a specific page. Ho ...

Detect the element that initiated the AJAX call in Jquery event handling

My goal is to capture the beforeSend event for all form submits on my site without interfering with jquery.unobtrusive-ajax.js. I've attempted the following method: $(document).on("ajaxSend", function (e, request, settings) { console.log ...

Encountering an issue while attempting to implement Redux Toolkit alongside the MUI ToggleButtonGroup component

The error message initially started as: Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. When I attempted to update the Redux state using a dispatcher, the handleChange function suddenly showed an e ...

AngularJS not swapping the data-url with the scope URL provided in {{ uploadUrl }}

Currently, I am utilizing jQuery fileupload to send a file to a specific URL. Within my controller, the code snippet below demonstrates how I generate the URL for uploading: uploadService.getUploadURL($scope.projectId).then(function (url) { $scope.up ...

Constructing Kiwi Browser to cater to legacy Android editions

Discover a unique variant of the Chromium browser known as Kiwi, which can be downloaded on Android devices through the Google Play Store. As of August 2021, it is only compatible with Android 5.0 and above, whereas previously it supported Android 4.1 and ...

Execute the knockout function using jQuery

There's a scenario where I am trying to trigger a knockout method using jQuery. The Knockout viewModel has already been bound, but I'm unsure of how to call it using jQuery. Below is the snippet of my code: $(document).ready() { form_submit( ...

Is ES5 essentially the same as ES6 in terms of my lambda search?

After doing a search on an array using ES6, I am having trouble figuring out how to rewrite the code in ES5 due to restrictions with Cordova not allowing me to use lambda functions... $scope.Contact.title = $scope.doctitles[$scope.doctitles.findIndex(fu ...

What is the reason that this jQuery code is exclusive to Firefox?

I am currently working on a code snippet that enables users to navigate back and forth between images by displaying them in a lightbox at full size. The code functions flawlessly in Firefox, however, it does not seem to have any effect on IE, Chrome, and S ...

Utilizing Javascript for logging into Facebook

Feeling frustrated! I've been struggling to implement the Facebook Login pop-up on my website using the Facebook JavaScript API. Despite following tutorials, I can't seem to make the login pop-up appear. Instead, when I go through the login pro ...

Putting an <input/> element inside a Material UI's <TextField/> component in ReactJS - a beginner's guide

I am attempting to style <TextField/> (http://www.material-ui.com/#/components/text-field) to resemble an <input/>. Here is what I have tried: <TextField hintText='Enter username' > <input className="form-control ...

Is it possible to extract my current location from one website and then access another website based on that location?

I am currently experimenting with an HTML5 script that loads a globe requiring users to click on it to determine the location. Once a location is clicked, another site opens displaying a map of the chosen location. Here is an example of the site with the i ...

Obtaining information from node.js module to the server.js script

I am attempting to extract data from a function within a node module, which returns a JSON object. My goal is to display this JSON object in a router located in my server.js file. This is how I am trying to export it: // Function Export exports.g ...

Display all information associated with the class that matches the clicked ID

Can anyone help me with a Jquery question? I am trying to display all data with the same class when I click on it. I have created a list of clickable items. When I click on an item, the corresponding data should be shown. However, the code I wrote is not ...

The JavaScript React Slider fails to hide the next arrow button when there are no images displayed on the screen

What I am trying to achieve is the display of a certain number of images inside a div according to the screen size. Currently, I have managed to hide the previous button when currentIndex != 0. However, I am facing difficulty in hiding the next button when ...

I encountered a validation error and a 404 error while trying to input data into all fields. Kindly review and check for accuracy. Additionally, I have included an

click here for image description Despite providing all details in the form fields, I keep receiving an error message prompting me to enter all fields... I am also encountering a "/api/user 404 Not Found" error and unsure of the reason. Interestingly, wh ...

Is there a way to verify if a React hook can be executed without triggering any console errors?

Is there a way to verify if a React hook can be invoked without generating errors in the console? For example, if I attempt: useEffect(() => { try { useState(); } catch {} }) I still receive this error message: Warning: Do not call Hooks i ...

What is the best way to simulate global variables that are declared in a separate file?

dataConfiguration.js var userData = { URIs: { APIURI: "C" }, EncryptedToken: "D" }; configSetup.js config.set({ basePath: '', files:['dataConfiguration.js' ], ..... UserComponentDetails: .....some i ...