Is it possible to rotate the JW Player using CSS or jQuery?

I am currently utilizing a JW Player to stream a video through the rtmp protocol. Here is how the code appears:

<div id="mediaspace2" >This text will be replaced</div></div>
<script>
jwplayer("mediaspace2").setup({
    flashplayer: "jwplayer.flash.swf",
    file: "rtmp://192.168.1.146:1935/live/myStream",
    height: 270,
    width: 480,
    skin: {
    name:'skins/JW-SKIN-ROUNDSTER.css'
    }

});
</script>

Upon implementation, the webpage displays correctly: https://i.sstatic.net/FOGAa.png

However, I now wish to display it in portrait mode by rotating it vertically. I added a simple div and modified its CSS as follows:

<div id="rotated" style="  -moz-transform:translate(-95px,95px) rotate(270deg);
  -webkit-transform:translate(-95px,95px) rotate(270deg);
  -o-transform: translate(-95px,95px) rotate(270deg);
  -ms-transform:translate(-95px,95px) rotate(270deg);
  transform:translate(-95px,95px) rotate(270deg);">
<div id="mediaspace2" >This text will be replaced</div></div>
<script>
jwplayer("mediaspace2").setup({
    flashplayer: "jwplayer.flash.swf",
    file: "rtmp://192.168.1.146:1935/live/myStream",
    height: 270,
    width: 480,
    skin: {
    name:'skins/JW-SKIN-ROUNDSTER.css'
    }

});
</script>

As a result of this change, the component is indeed rotated, but the video appears shrunk: https://i.sstatic.net/bGsSs.png

Is there a solution to correct this issue?

javascriptjquerycssjwplayer

Answer №1

While I haven't personally experimented with this yet, have you considered adjusting the dimensions of your player to width: 480 and height: 270? It may also be beneficial to explore different stretching options. Further information regarding the stretching parameter can be found at this link.

We appreciate Stack Overflow, however, we do not frequently monitor activity here. For prompt JW Player assistance, we recommend reaching out to

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

Troubleshooting: Issue with jQuery not recognizing this.id

Hey everyone, check out my code snippet below: $ (".input_check").change (function (){ if ($ (this).is (':checked')) { console.log(this.id + 'is checked') } else { console.log(this.id + &apo ...

javascriptjqueryjquery-ui

Having trouble with AngularJS integration in Node.js Express framework?

My AngularJS HTML file is below, and I am accessing it using http://localhost:3000/modulename/create. However, the issue arises as AngularJS is not functioning properly. For example, the ng-repeat directive is empty in the template, whereas when we console ...

javascriptangularjsnode.jsangularjs-ng-repeatmean-stack

Using Ajax to update multiple text field rows with unique values

I have a question regarding utilizing Ajax to update the second text field based on the input from the first text field. I am looking to create multiple rows using a for loop, with each row having its own set of values. HTML <form style="text-align:c ...

phpjavascripthtmlajax

How to pass command line arguments into Chrome using WebDriverIO Selenium from the config.js file

Is there a way to add the disable-web-security flag for Chrome in order to conduct UI tests? How can I incorporate commands into the wdio.config file () to achieve this? capabilities: [{ browserName: 'chrome' }] ...

javascriptgoogle-chromeseleniumwebdriver-iochrome-web-driver

Extract CSS from Chrome developer tools and convert it into a JavaScript object

Recently, we have started incorporating styles into our React components using the makeStyles hook from Material-UI. Instead of traditional CSS, we are now using JavaScript objects to define styles. An example of this is shown below: const useStyles = ma ...

javascriptcssreactjsmaterial-ui

Tips on validating emails using mongoose

As a beginner with Mongoose, I have a code snippet here. How can I validate the text that appears after the @ symbol in an email before saving it to the database? var user = new User ({ firstName: String, lastName: String, email: String, ...

javascriptnode.jsmongodbmongoose

Using jQuery to make a PNG image draggable and allow it to overlap with

Can jQuery's Draggable be used with an overlapping PNG image (not as a background image, but for printing purposes)? I attempted using the CSS style "pointer-events: none," however this solution does not function correctly in Internet Explorer. <d ...

jquerycssuser-interfacepngdraggable

Tips for aligning inline elements in the center of a webpage

My goal is to center the title in the middle of the page, taking into account its alignment with the search bar. However, I want it to be centered independently and not affected by the search bar's position. Is there a way to achieve this? To better ...

htmlcss

Pattern matching for CSS class names

My current project involves creating a PHP function that will sift through CSS and JS files, swapping out class names and IDs in CSS selectors without touching the HTML elements or CSS properties themselves. Alas, my knowledge of regular expressions is sev ...

phpcssregex

Executing a function within ng-repeat loop four times in AngularJs

In the code snippet below, a ul is populated with 21 phones using HTML: <li ng-repeat="phone in phones" ng-class="{'digestTest': countDigestOccurences(phone) }"> <p>{{phone.snippet}}</p> </li> The JavaScript method cou ...

javascriptangularjsfrontend

Retrieve the value of an attribute within a controller function that is not a directive

Here is some HTML content, <button data-href="helloworld">Show href Value</button> And here is some Javascript content, $("body").on('click', 'button', function(){ console.log($(this).attr("data-href")); }); When exe ...

javascriptangularjs

I require the ability to imprint an image using jquery

Can someone assist me with adding an ID to a cloned image using Jquery? I have almost completed the code but I am facing issues defining the ID for the cloned image. Below is the code I have written: //Make element click $(".drag").click(functi ...

javascriptjquery

designing a unique organizational chart layout with HTML and CSS

I'm facing a challenge in creating a customized organizational chart layout using HTML and CSS. Despite my efforts, I am having difficulties achieving the desired structure that includes parent, child, and grandchild nodes connected in a specific way. ...

htmlcssbootstrap-4responsive-design

Getting the most out of geometry vertices with Threejs: mastering partial transforms

In my current project, I am working with a mesh that consists of approximately 5k vertices. These vertices have been merged from multiple geometries into a flat array. Initially, I was able to modify individual vertices successfully by setting the flag `ve ...

javascriptthree.js

Do not need to refresh the form

I developed a PHP-based Feedback form that includes a Popup from Foundation 5. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style type="text/css"> .auto-style1 { margin-left: 1px; ...

javascriptphpjquery

Validating forms in ReactJS

I have developed a basic form validation feature for React. The inspiration for this project came from the following source: When I try to submit the form, input errors arise within the isValid function. I am seeking assistance in resolving this issue. A ...

javascriptreactjsformsvalidationmaterial-ui

Unconventional appearance of WordPress Jetpack sharing buttons on unique custom theme

Currently, my wordpress blog has a unique theme and is powered by Jetpack. I've activated Sharing and added various social media sharing services like Facebook, Twitter, Google+, Digg, among others in the "Enabled Settings" section. However, the sha ...

phphtmlcsswordpress

If I reload or close my page immediately after sending an asynchronous Ajax request to the server, will the request still be completed?

Suppose I use jQuery's Ajax to make the following request: $(document).ready(function() { $('#some_button').click(function() { $.ajax({ url: '/some/request', type: 'POST', ...

javascriptjqueryajaxasynchronous

The POST variable consistently remains void

The approach I am using to handle the data sent with jquery.ajax involves sending an empty string by default. Whenever there is a change, I monitor the input for changes and resend the data. Everything seems to work fine in the console, but in PHP, $this-& ...

javascriptphpjquerysqlajax

Is it possible to apply a background image on top of an existing image?

Is it possible to set a background image on an img tag? This is my current HTML markup: <div id="content"> <img src="my-image.jpg" alt="image" class="img-shadow"> </div> Here is my CSS code: #content img { floa ...

htmlcssimagebackground-image