Sample Blog Post

See our WordPress Plugin here

Let us take you on a tour of the codes and things you should do to show the wall of videos in your style and on your pages. At the end of the tour you will:

1. Know how easy it is to do,
2. How quickly you can have it on your website
3. And have a chance to see how it looks as well.

First part is to get the videos. We can do that by looking up all of our videos or to search for videos matching some tag. This way you are just sending a simple call to our server and our server does all the work for you. Another thing we could do is to get all videos and then filter them out any way you want. This does requires you to add some additional codes to find the videos you want to show. It also means that you can really go into a lot of details and fine tuning in a very simple way. Bellow we will show you a quick and simple way where our servers do all the work for you.

<link rel="stylesheet" href="https://assets.ziggeo.com/v2-stable/ziggeo.css" />
<script src="https://assets.ziggeo.com/v2-stable/ziggeo.js"></script>
<script>
	var ziggeo_app = new ZiggeoApi.V2.Application({
		token:"APPLICATION_TOKEN",
		webrtc_streaming_if_necessary: true,
		webrtc_on_mobile: true
	});
</script>

All you would do here, is change the APPLICATION_TOKEN part with your actual application token.

• To configure it how you want, you can check out our JavaScript header page. Click few buttons and copy your code.

Now looking at the code above we can see ziggeo_app. This is what we will use to call for other videos. You can see all of the other API nodes you can call, their definitions, what they expect and examples here. The last part would be just to create a player. There are many ways to do this. We will show you the more ‘complex’ one – JavaScript embed. The reason is simple – it allows you to use it even at a later point in your workflow. For example on a click of a button. In our case, our code will generate the player showing the video, and we will set it to take 30% width, allowing us to have multiple videos in a single row. So let us combine that with the above:

var response = ziggeo_app.videos.index({limit: 50, tags: 'homepage'});

response.success( function (data) {

	for(i = 0; i < data.length; i++) {

		//We create a placeholder (1 for each player)
		var player_placeholder = document.createElement('div');

		//Makes multiple placeholders go into single row
		player_placeholder.style.display = 'inline-block';

		//We add our code to the wall.
		document.getElementById('ourwall').appendChild(player_placeholder);

		var player = new ZiggeoApi.V2.Player({
			element: player_placeholder,
			attrs: {
				width: "30%",
				theme: "modern",
				themecolor: "red",
				video: data[i].token
			}
		});

		player.activate();
	}
});

That is it really. Once you get to this point you are done. Now just how simple was that. Check it out how it looks bellow. First, here is the entire code, from top to bottom to make it easy to copy and paste to your website. All you need is to change your APPLICATION_TOKEN as per above. You would also likely change the “homepage” to your own video tag.

<link rel="stylesheet" href="https://assets.ziggeo.com/v2-stable/ziggeo.css" />
<script src="https://assets.ziggeo.com/v2-stable/ziggeo.js"></script>
<script>
	var ziggeo_app = new ZiggeoApi.V2.Application({
		token:"APPLICATION_TOKEN",
		webrtc_streaming_if_necessary: true,
		webrtc_on_mobile: true
	});
</script>

<div id="ourwall"></div>

<script>
	function createWallOfVIdeos() {
		var response = ziggeo_app.videos.index({limit: 50, tags: 'homepage'});

		response.success( function (data) {

			for(i = 0; i < data.length; i++) {

				//We create a placeholder (1 for each player)
				var player_placeholder = document.createElement('div');

				//Makes multiple placeholders go into single row
				player_placeholder.style.display = 'inline-block';

				//We add our code to the wall.
				document.getElementById('ourwall').appendChild(player_placeholder);

				var player = new ZiggeoApi.V2.Player({
					element: player_placeholder,
					attrs: {
						width: "30%",
						theme: "modern",
						themecolor: "red",
						video: data[i].token
					}
				});

				player.activate();
			}
		});
	}

	//To allow us to work in many different scenarios we move the code into this segment.
	ziggeo_app.on("ready", function() {
		createWallOfVIdeos();
	});
</script>

Copy -> Paste -> Enjoy. It is that simple with Ziggeo. Remember to check it out bellow as well. Bonus: Can I do it without any code? Quite likely, just check out our integrations page to see if we already support it. See all replies · Leave a reply

Leave your reply here

Note: Videos posted on this page are private and will not be visible to anyone else but you.