Trying to embed the player on a Wordpress page

Follow

Marc Barbry

• July 30, 2019 18:27

I have included the links to the CSS and JS files on unpkg in the head tag. Then this in the page itself. Nothing renders.

<video
id="example-player"
controls
muted
class="cld-video-player cld-video-player-skin-dark"
data-cld-public-id="POH-_Landing_Page"></video>
<script>
var cld = cloudinary.Cloudinary.new({ cloud_name: 'mxm-marc' });
var player = cld.videoPlayer('example-player');
</script>

0

• 

  Marc Barbry

  • July 30, 2019 21:13

  I finally got it to work.  Is there a way to adjust the volume using data-cld-transformation?  I tried "e_volume" like what is used in the URL parameters but it didn't work.

  0

  Comment actions Permalink
• 

  Marissa Masangcay

  • July 31, 2019 21:56

  Hi Marc,
  
  With the video player you would want to use the volume method to set the volume level. An example would look as follows:

  
  player.source('example_video').volume(.90).play();

  The values here range from 0 to 1. You can view this method and all other methods supported for the video player in our docs here:
  
  https://cloudinary.com/documentation/video_player_api_reference#supported_methods
  
  Hope this helps!

  0

  Comment actions Permalink
• 

  Scott Heliker

  • December 08, 2019 15:13
  • Edited

  Got this working with width only by adding it in the script area. Could not get width working in the video tag.

   

  I would like to only show the play button but not the rest of the controls. Is this possible?

   

  <video
  controls
  id="example-player"
  class="cld-video-player cld-video-player-skin-dark"
  data-cld-colors='{ "base": "#ffffff", "accent": "#FF3636", "text": "#FF3636" }'
  data-cld-public-id="Video/bestmexican">

  </video>

  <script>
  var cld = cloudinary.Cloudinary.new({ cloud_name: 'my_cloud_name' });
  var vplayer = cld.videoPlayer("example-player", {
  publicId: 'Video/bestmexican',
  loop: false,
  controls: true,
  autoplayMode: 'false',
  floatingWhenNotVisible: 'left',
  fontFace: 'Yatra One',
  transformation: { width: 600, crop: 'limit' },
  
  sourceTypes: ["hls", "mp4"]
  })

   

  </script>

  0

  Comment actions Permalink
• 

  Aditi Madan

  • December 12, 2019 20:40

  Hi Scott,

  Cloudinary uses Videojs and you can modify the CSS to hide the controls you don't need.

  This stack overflow link will be helpful: https://stackoverflow.com/questions/13524879/videojs-add-only-play-control

  We don't have a way to hide the specific controls through the HTML tag.

  Regards,
  Aditi

   

   

  0

  Comment actions Permalink

Post is closed for comments.