Super simple video embeds like in New York times site

Add this into the URL string: ?autoplay=1&mute=1
https://stackoverflow.com/questions/63843592/autoplay-embedded-a-youtube-video

Depending on how you embed a video in WP, URL query strings could get dropped. If so, you may need to manually build a proper iframe tag as custom HTML.

Depending on one’s browser and security settings, a visitor doesn’t always get the behavior you want them to. Videos may simply refuse to autoplay no matter what you do.

Hello @bcworkz , thanks for the response.

Aside from autoplay, there is also the lack of progress bar or any button other than sound in-off button.

Liker here: https://www.nytimes.com/2022/12/12/us/el-paso-migrants-border.html?searchResultPosition=7

Do you think the videos presented this way is just a matter of customizing the iframe? When I look at the source, I don’t see any iframe. This is why I thought it’s some kind of a proprietary technology.

Here on Washington post story, again you see video that fills the frame, autoplays and there are no buttons or progress bar. How do that do that?

Looks like the NYT vid is just a HTML5 <video> block:

<video class="css-dcisop" tabindex="0" preload="auto" crossorigin="anonymous" loop="" playsinline="" src="https://vp.nyt.com/video/2022/12/12/104919_1_12vid-migrants-carousel-54392_wg_480p.mp4" autoplay="true" data-seen="true"></video>

Note that the source is their own .mp4 file, it’s not a streaming service embed like YouTube. To show the controls the tag would include the controls attribute. The border, margins, size, etc. are manged with CSS.

All tag specific attributes: https://www.w3docs.com/learn-html/html-video-tag.html#attributes-9

Many thanks @bcworkz.

Getting the hang of it: https://escapefromtehran.com/wp-content/video_test.html

I know how to eliminate the controls now.

but do you know how I can have just a single sound on/off button (without any other controls) like how NYT.com does it on this page:

https://drive.google.com/file/d/1E0FGDjgIZwxUF0Fl758PPhc1CF9bFaEd/view?usp=sharing

Look in the lower right corner of the video. I’m thinking it’s something propriatory they’re doing.

All I know is it’s a button element that is positioned in the corner with CSS, which contains a SVG graphic as the speaker-x icon.

Presumably there’s a JS listener attached to it that’s waiting for a click event. The event callback manages the sound via some script process that sets the muted property of the video element to false and hides the icon at the same time.

many thanks @bcworkz