Help Needed Inserting Video on Page

  • rasinton

    (@rasinton)


    6 years ago

    Sorry if this question is a bit basic, but, not very experienced with WP!

    I look after parts of our tennis club website and have just created a new page where we plan to put some videos that the coach has been creating. I have put 2 on, so far, and although they seem OK the problem I have got is that they start playing as soon as the page is opened and I would like this to stop.As you can imagine, this causes problems when there are several all starting at once!!!!

    Here’s what I did…..
    Edit Page
    Added some text
    Clicked the + Add Block
    Video
    Media Library (chose video)
    Publish

    As I said, when you go to page then the video starts playing automatically.

    Then I tried….
    Edit Page
    Clicked on video block
    Show Block Settings
    Under Video Settings the Autoplay is not selected as on
    I set the Muted to ON, but, this made no difference to sound
    I tried adding a “Poster Image” and while this shows up on the EDIT Page page there is no sign of it when you View Page.

    The HTML for one of the videos is…..

    <figure class=”wp-block-video”><video controls src=”http://staging.prestburytennis.org/wp-content/uploads/2020/04/AgilityFootworkFixed.mp4″></video></figure&gt;

    This is driving me mad and, surely, there is a way to do this! If anyone can spot what I am doing wrong or come up with suggestions for me to try then I would be very grateful!

    • This topic was modified 6 years ago by rasinton.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • engineeringsnipits

    (@engineeringsnipits)

    6 years ago

    Interestingly enough, the videos didn’t auto play for me on Firefox or Chrome, but only the second video tries to play on Edge. As for Internet Explorer, it tries to download the second video.

    Looking at the HTML the first video the source is all within the <video> html tag, but the second is within and <iframe> tag and the <video> tag within the iframe has an autoplay=””

    In either case, you could try editing the block as HTML and adding an autoplay=”false” element to the <video> tag.

    Here’s a link to all of the elements that the <video> tag supports:
    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

    Thread Starter rasinton

    (@rasinton)

    6 years ago

    Hi

    Sorry, I had been messing with the page all afternoon and actually found a way to prevent the autoplay (by creating a Classic Paragraph and pasting the URL into it)

    However, that solution does not allow me to use a Poster image for video!

    Anyway, I have put the page back to how it was and has 2 videos on, both created using a video block – and none of the settings (autoplay, muted, controls) has any effect on the video playback.

    engineeringsnipits

    (@engineeringsnipits)

    6 years ago

    Ok, I checked again, I forgot I had a plugin on Firefox that automatically disables auto-playing videos.

    What I’m seeing is on Firefox and Edge the videos will auto-play, Chrome doesn’t, and our good friend IE tries to download them. I checked the page source and I still saw the autoplay=”” on the <video> tag.

    I added a quick video to my site and I could not get it to auto-play (unless I turned on auto-play). Also I didn’t have the autoplay=”” on mine. I think this is a problem with how certain web browsers handle an empty defined attribute.

    On the other side of things maybe this is a bug that was addressed in an update. What version of WordPress are you using? Also do you have any media plug-ins on your site?

    Thread Starter rasinton

    (@rasinton)

    6 years ago

    Sorry for delay in replying as I was waiting for input from the main developer who created the website for us to respond.

    First off….the version of WP is 5.4.1

    He said that the Video block was not generating the correct HTML and was missing the source tag. What he suggested was to insert a “Custom HTML” block and use the following code….

    <video poster=”http://prestburytennis.org/wp-content/uploads/2019/06/PTC-Picture-144-2.jpg&#8221; controls type=”video/mp4″>
    <source src=”http://prestburytennis.org/wp-content/uploads/2020/04/hipmobilityFixed.mp4″&gt;
    Your browser does not support the video tag.
    </video>

    This now works fine!

    Thanks for replies.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Help Needed Inserting Video on Page’ is closed to new replies.