Trying to manually embed HTML5 video in WP

  • Resolved david221

    (@david221)


    10 years, 1 month ago

    At the moment, I’m trying to work out how to embed a video that streams immediately when you open a page. This is the code I’ve written right now.

    <div id="home-page" class="wide-content">
 <div class="video-segment content-segment">
  <div class="video-container banner-container">
      <video autoplay loop poster="" class="horse-banner" width="100%">
        <source src="video1.mp4" type="video/mp4">
     </video>
     </div>
  </div>

    Can I do this by writing code manually, or do I need a plugin for streaming videos in WordPress?

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

  • Hello,

    Your code should work but make sure that you have set the correct src of the file (best is to use absolute path of the file).

    Thread Starter david221

    (@david221)

    Thanks AI. You were right, the code I had was working perfectly.

    But I have one more question: is it possible to shorten the height and the width of the video evenly? I tried doing it normally in CSS, but it didn’t work out.

    Thread Starter david221

    (@david221)

    I suppose it’s a good idea to show my code to tell what I’ve done so far.

    .video-container {
	width: 100%;
}

.wide-content
.video-content {
	padding-top: 0;
	padding-bottom: 0;
}

.wide-content
.content-segment {
	padding-top: 0;
	padding-bottom: 0;
}

.video-content {
	width: 100%;
	height: 400px;
	position: relative;
	overflow: hidden;
}

.wide-content>* {
	min-height: 20px;
}

.video-segment .banner-container .horse-banner {
	position: absolute;
	z-index: -10;
}
    Thread Starter david221

    (@david221)

    I worked it out. 

    .wide-content {
      overflow: hidden;
      height: 400px;
      clear: both;
      border-bottom: 12px solid #67771F;
}
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Trying to manually embed HTML5 video in WP’ is closed to new replies.