I am trying to access these Mux augmented properties via GraphQL on my Asset field (accepts videos only), but I can not access them… What am I missing here exactly?
Ignore figured out…
video {
video {
streamingUrl
}
}
Still having issues… Video does not play, any idea?
I have the data and adding video like this:
<VideoPlayer data={block.video.video} />
If two kinda worked, did you maybe try three block.video.video.videos? 
I’m kidding…
What does your data (block.video.video) object look like? It should have at least the muxPlaybackId prop: https://github.com/datocms/react-datocms/blob/master/docs/video-player.md#example
If it does have that and the video still isn’t showing up, could you please share:
- The frontend URL where this is happening (if it’s public)
- The GraphQL query and response object (
block.video.video) - The component or file that’s using
<VideoPlayer/>(like what else is in that same component/page?)
This is my block structure…
I have filed a named video - single asset type that accepts only videos.
If I query this I get errors:
If I query it like this it works, but your VideoPlayer stays blank as seen above
Tried this like explained in your docs but never get video playing…
<VideoPlayer data={block.video.video} />
<VideoPlayer data={block.video} />
This is the result:
Does it make a difference if you include video.video.muxPlaybackId (next to the streamingUrl?
Do you mean like adding `muxPlaybackId` to the GraphQL query?
... on VideoRecord {
id
video {
video {
muxPlaybackId
streamingUrl
mp4High: mp4Url(res: high)
mp4Med: mp4Url(res: medium)
mp4Low: mp4Url(res: low)
duration
framerate
thumbJpg: thumbnailUrl(format: jpg)
thumbPng: thumbnailUrl(format: png)
thumbGif: thumbnailUrl(format: gif)
}
}
}
Yes, exactly. The VideoPlayer needs that property to load the right video. (It’s silly, because that ID is also in the streamingUrl already… but I don’t think it checks there… I should submit a PR for that)
Example:
The top and bottom videos are using mostly the same GraphQL response:
{
data: {
upload: {
video: {
muxPlaybackId: "28er02Qxyo702001V7ACzXbdxhvw2j3XGX1",
streamingUrl:
"https://stream.mux.com/28er02Qxyo702001V7ACzXbdxhvw2j3XGX1.m3u8",
width: 1280,
height: 720,
blurhash: "LVCi{jR+E1t6~pbHM{oL%Moen$j[",
blurUpThumb:
"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQ0TDhUNFQ0NDikWFg0NFxUZGCITFiEaHysjHR0oHRUWJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDgcOHA4FHDscFh0vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIAA4AGAMBIgACEQEDEQH/xAAXAAADAQAAAAAAAAAAAAAAAAAABQYH/8QAHRAAAgICAwEAAAAAAAAAAAAAAQQAAgMSESEyE//EABcBAAMBAAAAAAAAAAAAAAAAAAECAwD/xAAXEQADAQAAAAAAAAAAAAAAAAAAAQIR/9oADAMBAAIRAxEAPwBMm2vYjmwjb6q2oDuJl9HMuMdWMaLPZ74u7mQaoEU8LR+6l8HG4hIhtrNp7MIuUZ09P//Z",
},
},
},
};
Except that the bottom one has the muxPlaybackId removed, and therefore cannot show the video even though it has the other properties 
I raised an issue: https://github.com/datocms/react-datocms/issues/113
Will try to PR it next week. But in the meantime, if you ensure that muxPlaybackId is in your GraphQL query and the returned data.video.video, it should work!
Yay, now it works as expected! Thanks…
I think you should update your docs as it doesnt show `muxPlaybackId` 
Two additional questions:
- I am getting top and bottom black border, see the image… Shouldnt this be gone if I set width and height to have the correct aspect ratio by providing
widthand `height` in the query?
- How do I completely hide video controls? I have looping video.
Which docs were missing that? I’ll add it, sorry! (There’s just a lot of docs and sometimes we miss a spot!)
It’s a bit tricky, but you have to use Mux’s CSS rules for this:
If you’re using CSS modules, the code would be something like this:
import styles from 'success.module.css';
//...
<VideoPlayer data={mockResponse.data.upload.video} autoPlay="muted" loop={true} />
And success.module.css would be something like:
:global(mux-player) {
--controls: none;
}
You have to use the global keyword to affect the mux-player web component, which would otherwise be incorrectly namespaced.
Alternatively, you could instead specify this in an inline style, but TypeScript will complain because I don’t think Mux exports their custom CSS properties yet:
{/*@ts-expect-error TS2353 The Mux --controls CSS key isn't exported*/}
<VideoPlayer data={mockResponse.data.upload.video} style={{'--controls': 'none'}}/>
You’re just seeing the backdrop for the bottom control bar. Once you hide that (as above), there should be no more bars!
Does that work?
I updated Leverage GraphQL for media handling | Documentation with more detailed information.
If there’s anywhere else this isn’t clear, please let me know and I will update that too 
1 Like
(Side note: In TypeScript, hiding the Mux controls via CSS will currently cause a type error. That would require an upstream fix from Mux; please see https://github.com/muxinc/elements/issues/1198 for details, and for now, just @ts-expect-error it.)
Seems to work for Safari v16 (macOS Ventura):
And Safari 15 (macOS Monterey):
As well as Safari an iPhone 14 (via browserstack):
I do get an error on some older devices, but seems to be the whole website and not just the video?
Safari 15 on iPhone 13:
Or Chrome on that same phone (which still uses the same webkit as Safari, I believe):
What browser & OS were you using where only the video was broken?
I fixed it… it was Content-Scurity Policy 
1 Like