John Davidson

Message:

I'm trying to embed an self hosted video into a wordpress page. This is a video hosted in the media library on the same wordpress install.

But I'm having difficulties getting the video to appear on the page, not on autoplay and with sound.

It seems to either:

1. appear with no play button (looks like a static image)


2. appear autoplaying but with no sound.

I've tried various settings on the page code to get this to appear like a regular video with a play button that's not set to autoplay but I'm stumped.

These were the settings when I came to change them

<div class="video-area">

                  



 <video width="100%" autoplay muted>

          <source src="<?php the_field('video_section_video') ?>" type="video/mp4">

        </video>

                   

                </div>

I then tried this:

   <div class="video-area">

              <video width="100%" muted="false" autoplay="false">

                  <source src="<?php the_field('video_section_video') ?>" type="video/mp4">

              </video>

                       

   </div>

And I also tried changing the original default settings to removing autoplay and muted, but no combination of changes seems to have the effect I want.

It's either static and no option to start the video, or it plays automatically without sound. I understand browsers dont allow videos to autoplay these days with sound, but I just need it to appear like a regular video with a play button.

---

My Answer:
One possible solution could be to add the controls attribute to the video tag. This will display the default video controls, including a play button, pause button, and volume control.

Here's an example of how you can modify your code:

html

By adding the controls attribute, the video should now display with the default video controls, allowing users to manually start and stop the video as needed.