How to embed a BitChute video 2017-09-04: Difference between revisions

From The WMD Library
Jump to navigation Jump to search
VisualWikitext
No edit summary
No edit summary
Line 35: Line 35:
  <nowiki>
  <nowiki>
<html>
<html>
<div class="videoWrapper">
<div style="width:</html>{{{width|100%}}}<html>"><div class="videoWrapper">
<iframe src="https://www.bitchute.com/embed/</html>{{{code|zywY9ASo5fs4}}}<html>/" width="100%" height="360" frameborder="0" allowfullscreen></iframe>
<iframe src="https://www.bitchute.com/embed/</html>{{{code|zywY9ASo5fs4}}}<html>/" frameborder="0" allowfullscreen></iframe>
</div>
</div></div>
</html>
</html>
<noinclude>
<noinclude>
Line 45: Line 45:
{{BitChuteVideo
{{BitChuteVideo
|code = BitChute Video Code
|code = BitChute Video Code
|width = percentage of space (default 100)
}}
}}
</pre>
</pre>
Line 51: Line 52:
</nowiki>
</nowiki>


We are using the the <HTML> tags but this isn't a publicly editable wiki.
And that produces an embed such as the following (60% width):
 
The final step is to use the template which you do like this:
<nowiki>
{{BitChuteVideo
|code=zywY9ASo5fs4
}}
</nowiki>
 
And that produces an embed such as the following:
{{BitChuteVideo
{{BitChuteVideo
|code=zywY9ASo5fs4
|code=zywY9ASo5fs4
|width =60%
}}
}}


Revision as of 10:34, 8 September 2017

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=1416"