Add Video in sidebar layout wordpress - wordpress

I am new to wordpress,I am using interface theme (http://themehorse.com/preview/interface/) ,I have downloaded a youtube video in mp4 format and uploaded it through Admin.Now i want to show this video in Widget Tab Business Page Section.

Goto your widgets and drag the text widget to your desired sidebar. Then inside your widget type this code in
<video width="320" height="240" controls>
<source src="http://yoursite.com/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Replace the source link to yours and adjust the dimensions.

Related

Remove the big play button appears on <video> tag in firefox mobile

I've been struggeling with this one for a long time and haven't found a solution yet.
I have a preloader on my friend's website which I built (he insist of keeping it)
the preloader is applied with the video tag like so:
<video muted autoplay loop playsinline preload frameborder="0" width="100" height="100">
<source src="/media/preloader.webm#t=0.25" type="video/webm">
<source src="/media/preloader.mp4#t=0.25" type="video/mp4">
<source src="/media/preloader.mov#t=0.25" type="video/quicktime">
</video>
on all browser that's working great, but on firefox mobile before video is playing I see this play button(for half a second):
https://i.stack.imgur.com/YRpal.png
What can I do to remove this annoying button for good?

How to play videos of different formats in html using video tag

I have a page where I need to display videos with different extensions.
Example: .mp4, .wmv
<video width="100%" controls>
<source data-ng-src="{{video.url}}" type="video/*">
Your browser does not support this video.
</video>
I just put a star but it is not playing my video.Showing an empty screen.Can anyone please suggest me help.Thanks.
In case you need it to support multiple types of videos, you must add multiple source of those videos. The browser picks the appropriate one to play.
And moreover, your code doesn't contain the src attribute.
<video width="100%" controls>
<source src="http://www.educationalquestions.com/video/ELL_PART_5_768k.wmv" type="video/wmv">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>

How to display WordPress audio player in table

I tried to add default WordPress audio player in the normal HTML table. i want to display all the three below div in same line even in mobile devices. Any possible to do like this or any option to show only play button in audio player or using html5 audio player.
<table><tbody><tr>
<td><div>My audio</div></td>
<td><div>[audio src="http://cldup.com/uMFLx60B4V9/9j8WQE.mp3"]</div></td>
<td>Date</td>
</tr></tbody></table>
Replace your DIV
<div>[audio src="http://www.website.com/123.mp3"]</div>
with this HTML5 tag
<audio controls>
<source src="http://www.website.com/your_file.mp3" type="audio/mpeg">
</audio>

How to remove HTML5 video player navigation button

I am using HTML5 video player to play video constantly.Every thing is fine except the video navigation button displaying at the last of the video screen as soon as the mouse cursor moves over the video. I want to remove or hide it but not getting how to do it ..
Here is the HTML for the Video used..
<video id='video-player' autoplay="autoplay" loop preload='metadata' controls>
<source src="Video/1.MP4" type="video/mp4">
</video>
Please help me to remove the navigation bar from the last ..Thanks..
You can disabled controls via Javascript:
document.getElementById('video-player').controls = false
Or simply remove controls attribute:
<video id='video-player' autoplay="autoplay" loop preload="metadata">
<source src="Video/1.MP4" type="video/mp4">
</video>

Positioning a Video in Dreamweaver

I have a video that I am trying to position over a section on a website. On my test server the position is perfect but when I upload my new file to the online server the video stays centered and below all the other info on the site. How do I code this so the index1 file displays the video like my test server.
The code on my test server is:
<div class="#main_video" id="main_video">
<video width="460" height="260" controls>
<source src="include/promo_2012.ogv" type="video/ogg">
<source src="include/promo_2012.mp4" type="video/mp4">
</video>
</div>
I selected the div and positioned it at:
Relative<br/>
Top: -414<br/>
Left: -266
Any help would be greatly appreciated.
-Josh
Try,
#main_video{
float:left;
}
This should put it to the left. Here's a live example: http://jsfiddle.net/S6mmD/
And by the way, classes are used in HTML like so: <div class='red'> and in CSS: .red{color:#f00;}
ids are styled in CSS with the pound sign # like above.

Resources