Scale and rotate video stream

[cjjaeckson]

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

[nmilleson]

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

Nick

[cjjaeckson]

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

[nmilleson]

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);

[cjjaeckson]

Hello Nick,

thanks for the tip. I tried it and it rotated and scaled. Yeeey!

But now I have a positioning error. I tried everything to fix it, but it didn't work.

Does anyone have any ideas? Unfortunately, I'm a complete beginner at CSS coding.

For documentation: I found a good tutorial here:

https://hacks.mozilla.org/2011/01/zooming-and-rotating-for-video-in-html5-and-css3/ 

Chris

[nmilleson]

I would try using the "translate" function of the css transform:

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate

[cjjaeckson · Accepted solution]

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