type: picture-elements
elements:
- type: icon
icon: mdi:printer-3d-nozzle
entity: camera.ultimaker
style:
top: 10%
left: 32%
color: '#FFA54F'
transform: translate(-50%, -50%) scale(2.5, 2.5) rotate(0deg)
filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3))
opacity: 0.8
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: custom:more-info-card
entity: camera.ultimaker
card_mod:
style:
more-info-card$ha-card:
$: |
.card-header {
display: none !important;
}
:host ::slotted(.card-content) {
padding: 0 !important;
}
more-info-content$more-info-camera$ha-camera-stream$ha-hls-player$: |
video {
border-radius: 20px !important;
width: 500px !important;
bottom: 400px;
position: fixed;
}
This one brings back the headline and white background and changing the values doesn’t move the stream 
. I actually do like the white background but not the headline.
The card mod has to line up with content: and a single indent can cause an issue.
type: picture-elements
elements:
- type: icon
icon: mdi:printer-3d-nozzle
entity: camera.detached_garage_cam_fluent_lens_0
style:
top: 10%
left: 32%
color: '#FFA54F'
transform: translate(-50%, -50%) scale(2.5, 2.5) rotate(0deg)
filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3))
opacity: 0.8
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: custom:more-info-card
entity: camera.detached_garage_cam_fluent_lens_0
card_mod:
style:
div.content: |
.content .container {
padding: 0px !important;
}
more-info-card$ha-card:
$: |
.card-header {
display: none !important;
}
:host ::slotted(.card-content) {
padding: 0 !important; }
}
more-info-content$more-info-camera$ha-camera-stream$ha-hls-player$: |
video {
border-radius: 20px !important;
width: 500px !important;
bottom: 400px;
position: fixed;
border-radius: 20px !important;
}
This what I get
Mine looks similar now, but changing any value about the position or border radius doesn’t change anything. Also, Border Radius is mentioned 2x? Is this a mistake?
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: custom:more-info-card
entity: camera.ultimaker
card_mod:
style:
div.content: |
.content .container {
padding: 0px !important;
}
more-info-card$ha-card:
$: |
.card-header {
display: none !important;
}
:host ::slotted(.card-content) {
padding: 0 !important; }
}
more-info-content$more-info-camera$ha-camera-stream$ha-hls-player$: |
video {
border-radius: 100px !important;
width: 50px !important;
bottom: 10px;
position: fixed;
border-radius: 100px !important;
}
Not sure how I copy and pasted from a test card, but this is the working code.
card_mod:
style:
div.content: |
.content .container {
padding: 0px !important;
}
more-info-card$ha-card:
$: |
.card-header {
display: none !important;
}
:host ::slotted(.card-content) {
padding: 0 !important;
}
more-info-content$more-info-camera$ha-camera-stream$ha-hls-player$: |
video {
border-radius: 20px !important;
width: 500px !important;
bottom: 400px;
position: fixed;
}
For example if I adjust the border-radius to 120px i get this
It still doesn’t work for me. Can you post a picture of your working code please. I had the problem in the past that copy & pasting the code does change some tap stops. Maybe there is the problem.
Can you post your full card code and I can test/ adjust that?
# Ultimaker
- type: conditional
conditions:
- entity: input_boolean.3d_drucker_ein_ausschalten
state: on
elements:
- type: icon
icon: mdi:printer-3d-nozzle
entity: camera.ultimaker
style:
top: 10%
left: 32%
color: '#FFA54F'
transform: translate(-50%, -50%) scale(2.5, 2.5) rotate(0deg)
filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3))
opacity: 0.8
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: custom:more-info-card
entity: camera.ultimaker
card_mod:
style:
div.content: |
.content .container {
padding: 0px !important;
}
more-info-card$ha-card:
$: |
.card-header {
display: none !important;
}
:host ::slotted(.card-content) {
padding: 0 !important;
}
more-info-content$more-info-camera$ha-camera-stream$ha-hls-player$: |
video {
border-radius: 120px !important;
width: 500px !important;
bottom: 400px;
position: fixed;
}
What is the top portion of the card code?
Test this in a separate card
type: picture-elements
elements:
- type: icon
icon: mdi:printer-3d-nozzle
entity: camera.ultimaker
style:
top: 10%
left: 32%
color: '#FFA54F'
transform: translate(-50%, -50%) scale(2.5, 2.5) rotate(0deg)
filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3))
opacity: 0.8
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: custom:more-info-card
entity: camera.ultimaker
card_mod:
style:
div.content: |
.content .container {
padding: 0px !important;
}
more-info-card$ha-card:
$: |
.card-header {
display: none !important;
}
:host ::slotted(.card-content) {
padding: 0 !important; }
}
more-info-content$more-info-camera$ha-camera-stream$ha-hls-player$: |
video {
border-radius: 20px !important;
width: 500px !important;
bottom: 400px;
position: fixed;
}
image: https://demo.home-assistant.io/stub_config/floorplan.png
- type: picture-elements
image: /local/floorplan/ipad_startseite.png
elements:
If I use your new code on a new subview it’s still the same. Changing the border radius for example does not work.
What are the versions for :
HA?
Your browser?
Are you using any themes?
I use the companion App on iPad. Still the same on different browser though.
I am not sure about any themes. As far as I know I didn’t use any in the past. How can I check it?
Find your name at the bottom of the menu and click the image next to it.
Scroll down an look for Theme.
I am fairly certain its the browser though.
Maybe I am missing any HACS Integration? Which one is necessary?
The more-info-card and browser-mod
Both are installed 
I messaged you so we can do some troubleshooting steps
1 Like
Two solutions here depending on the camera video type
card_mod:
style:
div.content: |
.content .container {
padding: 0px !important;
}
more-info-card$ha-card:
$: |
.card-header {
display: none !important;
}
:host ::slotted(.card-content) {
padding: 0 !important; }
}
more-info-content$more-info-camera$ha-camera-stream$: |
img {
border-radius: 20px !important;
width: 500px !important;
bottom: 200px;
position: fixed;
}
card_mod:
style:
div.content: |
.content .container {
padding: 0px !important;
}
more-info-card$ha-card:
$: |
.card-header {
display: none !important;
}
:host ::slotted(.card-content) {
padding: 0 !important; }
}
more-info-content$more-info-camera$ha-camera-stream$ha-hls-player$: |
video {
border-radius: 20px !important;
width: 500px !important;
bottom: 200px;
position: fixed;
}
1 Like