Skip to main content
C
cjjaeckson10-Marble
10-Marble
July 13, 2022
Solved

Scale and rotate video stream

  • July 13, 2022
  • 1 reply
  • 3428 views

Hello community! 

 

I have included a simple video stream into a mashup via the thingworx web frame. Unfortunately, the stream does not scale with the size of the widget, but is integrated in its full resolution (fullHD). The web frame compensates this via scroll bars. So you can't see the full video and the scrollbars doesn't look nice either.
Is there any possibility to scale the video for example via custom css? Is it even possible to make this responsive?

Also, I have positioned the camera of the stream upside down. Is there any way to rotate the video stream?

 

I'm looking forward to your answers, because I can't get further. And as I have seen in other threads, here are some pros on the go. 😉

 

Thanks a lot!

 

Chris

Best answer by cjjaeckson

Hi Nick,

 

thanks a lot! Finally it worked. Here is the code to scale and rotate a videostream for documentation:

 

.widget-webframe-frame{
 transform:scale(0.8) rotate(180deg) translate(-100px, -78px);
 height: 600px;
 width: 800px;
}

 

 

Greetings

Chris

1 reply

N
nmilleson17-Peridot
17-Peridot
July 15, 2022

Is your container with your webframe widget responsive or is it a static width?  

 

Nick

C
cjjaeckson10-MarbleAuthor
10-Marble
July 15, 2022
Hi Nick,

my container has a static width. The rest at the right sight is responsive.
But if there is a possibility to make the videosize responsible in dependency with the container width, that would be amazing!

All the best
Christian
N
nmilleson17-Peridot
17-Peridot
July 15, 2022

This might have your answer (https://stackoverflow.com/questions/11382473/resize-external-website-content-to-fit-iframe-width#:~:text=What%20you%20can%20do%20is,E.g.)

 

Specifically, these css statements:  

-webkit-transform:scale(0.5);
-moz-transform-scale(0.5);

 

Terms & ConditionsAccessibility statement