Member Avatar for satimis

Hi all,

Following codes starts the video on another page by clicking the image but without a button on it.

[code]
<h3 style="text-align: center;"><strong><span style="color: #0000ff;">How To Play-The-Game</span></strong></h3>
<a href="" target="_blank"><img class="aligncenter size-medium wp-image-156" alt="stocks_fr_beginners" src="" width="540" height="333" /></a>
[/code]

Please advise how to add a HTML button with a triangle inside on the image? And the video will start and play on the same page. TIA

B.R.
satimis

  • 2 Contributors
  • 4 Replies
  • 218 Views
  • 19 Hours Discussion Span
  • Latest Post Latest Post by satimis

Dani AI

Generated

Short summary and diagnosis: wants the poster image to show a circular play icon and start the video inline instead of opening the .mp4 in a new tab. was right to point you toward an HTML5 approach, but when you paste <script>/<link> tags into many WordPress widgets they get stripped or never run — that explains why video.js worked in a text file but not when pasted into the widget. Two practical routes: (A) use the WordPress [video] shortcode or a video plugin so WordPress handles scripts for you, or (B) use a tiny "replace poster with a video" snippet (below) that does not rely on external script tags in the widget.

Minimal overlay pattern (keeps poster until clicked, centers play icon, swaps in a native <video> and starts playback):

<div class="video-wrap" style="max-width:280px;margin:0 auto;position:relative;">
  <img class="poster" src="path/to/poster.jpg" alt="poster image">
  <button class="play-btn" aria-label="Play">Play</button>
  <div class="player" aria-hidden="true"></div>
</div>
.video-wrap img, .video-wrap video { display:block; width:100%; height:auto; }
.video-wrap { margin:0 auto; }
.play-btn {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:48px; height:48px; border-radius:50%; background:rgba(0,0,0,.6); border:none;
}
.play-btn:before {
  content:""; display:inline-block; margin-left:6px;
  border-left:12px solid #fff; border-top:8px solid transparent; border-bottom:8px solid transparent;
}
document.querySelector('.play-btn').addEventListener('click', function(){
  var wrap = this.closest('.video-wrap');
  var container = wrap.querySelector('.player');
  var v = document.createElement('video');
  v.src = 'path/to/video.mp4';
  v.controls = true; v.autoplay = true; v.style.width = '100%';
  container.appendChild(v);
  wrap.querySelector('.poster').style.display = 'none';
  this.style.display = 'none';
  container.setAttribute('aria-hidden','false');
});

Key fixes for your three issues

  • Centering: put the video in a wrapper with max-width and margin:0 auto; and make the image/video display:block; width:100%.
  • Oversized/offset play button: override the player CSS and use top:50%;left:50%;transform:translate(-50%,-50%) and explicit width/height as shown.
  • Poster disappearing / widget problems: confirm the poster URL loads directly in a browser (200 OK). If poster or the skin depends on an external script (video.js), do not paste script tags into a widget — enqueue them via your theme/plugin or use the built-in [video] shortcode or a WordPress video plugin.

If you want, show the widget HTML you tried and a screenshot of the page console (JS errors); that will make diagnosing the WordPress-specific behavior faster.

Recommended Answers

All 4 Replies

Member Avatar for JorgeM

I am not sure that I understand. In teh example you provided, you are showing an image for the hyperlink. Isnt that what you are asking you want to do...show an image that when clicked will take you to the target URL (html button)?

or do you want to use a <button> element instead?

Edited by JorgeM
Member Avatar for satimis

Hi,

No, I expect clicking the image the video will start to play on the same page, but not playing on another page which is now doing. The image doesn't show a "triangle" sign/button on it which is what I need to add.

On following coding:

    <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
    <script src="http://vjs.zencdn.net/c/video.js"></script>
    <video id="my_video_1" class="video-js vjs-default-skin" controls
    preload="auto" width="600" height="364" poster="oceans-clip.png"
    data-setup="{}">
    <source src="oceans-clip.mp4" type='video/mp4'>
    <source src="oceans-clip.webm" type='video/webm'>
    </video>

    <style type="text/css">
    .vjs-default-skin .vjs-big-play-button {
    -webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}
    </style>

Clicking the image, which has a "triangle" sign/button on it, starts playing the video on the same page.

Thanks

P.S.
The codes on my first posting were created on WordPress. The codes on this posting were manually created on text editor. I have tried putting the latter codes on the page created with WordPress. But it didn't work.

satimis

Member Avatar for JorgeM

Ok, what you have above is the HTML5 video element. A few notes you should be aware of...mainly that its not supported across all common browser versions. for example, not supported prior IE 9.

take a look at this example tutorial: .

In the example, you will notice how the video element is used and there is an example code on how to integrate a basic button element that can be used to play/pause the video. From there, you should be able to work with that basic example and include your own images, buttons, etc.. with JavaScript to control the player.

Member Avatar for satimis

Hi,

The codes are in the widget of WordPress.

Adding following codes on the widget replacing the original codes;

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
<video id="my_video_1" class="video-js vjs-default-skin" controls
  preload="auto" width="280" height="210" poster="oceans-clip.png"
  data-setup="{}">
  <source src="oceans-clip.mp4" type='video/mp4'>
  <source src="oceans-clip.webm" type='video/webm'>
</video>

<style type="text/css">
.vjs-default-skin .vjs-big-play-button {
    -webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}
</style>

I can get the result as expected but still having following problems;
1) The video frame is not centered on left/right border of the widget
2) The round button with a triangle inside is not centered. Also it is too big
3) The static picture disappears, i.e the picture showing a window frame on the video
(pls refer to screenshot_01)

Sorry I don't know how to upload the file.

Clicking File;
starts -> Upload Attachments
But I couldn't find the way selecting file to upload

Kindly advise how to fix my problems. TIA

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.