Add caption on html5 video

  • Hello,

    I’m trying to convert my GIFs to HTML5 videos with the autoplay, loop etc so they look exactly like gifs. I’ve been able to load up the video, but I have to do it with manual html like so:

    <video src=”https://myVideo.mp4&#8243; autoplay=”autoplay” loop=”loop” muted=””></video>

    When I insert an image into my wordpress post, I can add the [caption] tags to make it have the caption design, however if I put the caption around my video…

    [caption id="attachment_60" align="alignnone" width="800"]<video src=”https://myVideo.mp4&#8243; autoplay=”autoplay” loop=”loop” muted=””>[/caption]

    That doesn’t seem to work.

    Any help here? Or any other guidance on getting captions on videos?

    Thanks.

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

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

  • Hi there,
    the caption shortcode (which is a WP shortcode) doesn’t work that way :/

    I don’t think this is theme related, does it work with a default theme like Twenty Seventeen?

    Thread Starter teradyl

    (@teradyl)

    Hi Rocco,

    It does not work on Twenty Seventeen either. It may not be directly theme related, but the theme can implement a way to set a caption on an embedded video right? For modern HTML5 videos, this seems like something themes should start doing.

    Does the pro version make this easier?

    I’m looking for a little guidance on how to get a caption on my video properly, and I haven’t found many resources on that.

    Thanks.

    Thread Starter teradyl

    (@teradyl)

    An update: I fixed it.

    NOTE: If you implement any of the HTML here manually, you can never go back to the “visual” tab in WordPress or it modifies your HTML and screws it all up. If you do screw it up I think you can grab an older revision if you’ve saved it before.

    See the result here: https://biketoeverything.com/2017/12/30/tips-on-using-a-small-u-lock/

    I manually edited my HTML like so: 

    <div class="dylan-html5-video">
<video src="videoGif.mp4" autoplay="autoplay"
 loop="loop" muted="" playsinline="" webkit-playsinline="">
</video>
<p class="wp-caption-text">My caption</p>
</div>

    (Add <br> here if you want 2 videos next to each other)

    Then I messed around with the CSS like so:

    /* HTML5 video container */
.dylan-html5-video {
	padding: 10px;
	background-color: #eeeeee;
}

/* HTML5 video container hacking the spacing 
because there was an extra <p></p> tag getting 
added somewhere making an odd amount of space. 
If someone knows how to remove with this hack 
would be appreciated. */
.dylan-html5-video p {
	margin-top: -12px;
}

    And just for context, I have manual CSS dealing with normal image captions…so you’ll need this CSS too if you want it to look exactly the same:

    /* Hacking the default image container to look 
more to my liking */
.wp-caption {
	background-color: #eeeeee;
	padding: 10px;
}

/* Hacking the caption to look more to my liking */
.wp-caption-text {
	margin-top: 10px;
	margin-bottom: 0px;
	font-size: 18px;
}
    • This reply was modified 7 years, 2 months ago by teradyl.
    • This reply was modified 7 years, 2 months ago by teradyl.
    • This reply was modified 7 years, 2 months ago by teradyl.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Add caption on html5 video’ is closed to new replies.