How to embed a BitChute video 2017-09-04

From The WMD Library
Jump to navigation Jump to search

September 4, 2017

Following the notice that our Vimeo account is being withdrawn, we looked for alternative video hosting. While YouTube remains the obvious example, we wanted a free speech alternative. BitChute is coming on strong and the decentralizied architecture is appealing. However this isn't as easy to embed as more mature offerings like YouTube and Vimeo.

Here's how we got this working here on Mediawiki. Whilst this is tailored for Mediawiki, it will work in many other web settings. It is iFrame based and follows on from the Wordpress instructions here.

In order to make a properly responsive video (so that it changes size and works on mobile and other platforms) you need one small piece of magical CSS formatting code (which for Mediawiki was placed in Mediawiki:Common.css): 

/* 
	Making video boxes fluid instructions
	Added 2017-09-04 to make BitChute videos responsive.
	https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php  */

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 0px;
	height: 0;
	margin-bottom: 25px;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Next step was to create a template for embedding BitChute videos, the code for which looks like this. Notice the <div class="videoWrapper"> which everything is wrapped in: 

<html>
<div style="width:</html>{{{width|100%}}}<html>"><div class="videoWrapper">
<iframe src="https://www.bitchute.com/embed/</html>{{{code|zywY9ASo5fs4}}}<html>/"  frameborder="0" allowfullscreen></iframe>
</div></div>
</html>
<noinclude>
==Usage==
Include the following text to use the template:
<pre>
{{BitChuteVideo
|code = BitChute Video Code
|width = percentage of space (default 100)
}}
</pre>
[[Category:Video Templates]]
</noinclude>

And that produces an embed such as the following (60% width):


Drop us a line on Twitter if that helped you!

Retrieved from "https://dev.weaponofmusicaldefense.com/index.php?title=How_to_embed_a_BitChute_video_2017-09-04&oldid=1585"