View source for How to embed a BitChute video 2017-09-04

=== September 4, 2017 ===
{{GoogleAd-wide}}
<html><div style="float:right; padding:10px; width:30%;"></html>
{{BitChuteVideo|code=8IAwNp9pwyZ6 }}
<html></div></html>

Following the notice that our [[Vimeo censorship notice 2017-08-23|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 [https://bitchute.freshdesk.com/support/solutions/articles/22000205013-how-to-embed-a-bitchute-video-into-a-wordpress-post 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):

<syntaxhighlight lang="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%;
}</syntaxhighlight>

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

<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

And that produces an embed such as the following (60% width):
{{BitChuteVideo
|code=zywY9ASo5fs4
|width =60%
}}

Drop us a line on [https://twitter.com/wmdrock Twitter] if that helped you!

[[Category:News]]

{{GoogleAd-wide}}