Videos Integration examples

In order to integrate videos into a website, there 2 main solutions:

1 - Pop-up clipnow Integration

External ID usage

When using the external ID to request for a clip, you should also provide, in the URL request, the identity of the customer in our system because the external ids may not be unique. The whole url will look like that:

https://clip-api.clipnow.com:8181/rest/link/iframe?externalID={EXTERNAL_ID}&identity={IDENTITY}
  • Copy the code between the comments Insert and Finish insertion in the part of your HTML page described.
  • Replace {EXTERNAL_ID} with the external object ID for your expose. You could alternatively provide the objectID instead (the internal ID from the portals Immobilienscout24, Immonet or Immowelt), provide it using the following url instead: https://clip-api.clipnow.com:8181/rest/link/iframe?objectID={OBJECT_ID}
  • Replace {IDENTITY} with the identity of the customer in Clipnow.
  • You can see the results in the following demo sample (you will need to replace {EXTENRAL_ID}).
code
<html>
	<head>
		<!-- Insert this code in the <head> tag -->
		<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
		<!-- Colorbox is used for the pop-Up -->
		<script type="text/javascript" src="https://assets-immobilien.s3.amazonaws.com/colorbox/jquery.colorbox-min.js"></script>
     	<!-- you can choose between  the style colorbox5.css, colorbox2.css and colorbox6.css -->
		<link rel="stylesheet" href="https://assets-immobilien.s3.amazonaws.com/colorbox/colorbox6.css" type="text/css" media="screen" />
		<!-- Finished insertion -->	
	</head>
	<body>
		<!-- Insert this part wherever (inside the body tag) you want to show the link -->
    	<a id="{EXTERNAL_ID}" class='iframe' style="display : none;" href="">Play Video</a>	
		<!-- Finished insertion -->	
 
<!-- Insert this script in the end -->
<script type='text/javascript'>            
$(document).ready(function(){
	$(".iframe").colorbox({iframe:true, width:670, height:422});
	$.ajax({
		url: 'https://clip-api.clipnow.com:8181/rest/link/iframe?externalID={EXTERNAL_ID}&identity={IDENTITY}',
		dataType: 'jsonp',
		success: function(data){
			if(data['iframe'] != null && data['iframe'] != ""){
				$('#{EXTERNAL_ID}').attr('href',data['iframe']);
				$('#{EXTERNAL_ID}').show()
			}
		}
	});
})
</script>
<!-- Finished insertion -->	
	</body>
</html>

 

2 - Direct youtube Integration

  • Copy the code between the comments Insert and Finish insertion in the part of your HTML page described.
  • Replace {EXTERNAL_ID} with the external object ID for your expose. You could alternatively provide the objectID instead (the internal ID from the portals Immobilienscout24, Immonet or Immowelt), provide it using the following url instead: https://clip-api.clipnow.com:8181/rest/link/iframe?objectID={OBJEC_ID}
  • Replace {UUID_IDENTITY} with the identity name of the user in clipnow
  • You can see the results in the following demo sample (you will need to replace {EXTENRAL_ID} and {UUID_IDENTITY} to match your expose)
code
<html>
	<head>
		<!-- Insert this code in the <head> tag -->
		<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
		<!-- Finished insertion -->	
	</head>
	<body>
		<!-- Insert this part wherever (inside the body tag) you want to show the iframe -->
    	<iframe id="{EXTERNAL_ID}" type="text/html" width="640" height="360" frameborder="0" allowfullscreen></iframe>	
		<!-- Finished insertion -->	
 
<!-- Insert this script in the end-->
<script type='text/javascript'>            
$(document).ready(function(){
	$.ajax({
		url: 'http://clip-api.clipnow.com:8080/rest/link/iframe?externalID={EXTERNAL_ID}&identity={IDENTITY}',
		dataType: 'jsonp',
		success: function(data){
			$('#{EXTERNAL_ID}').attr('src',"https://www.youtube.com/embed/"+data['youtube'] + "?modestbranding=1&rel=0&color=white&theme=light");
		}
	});
})
</script>
<!-- Finished insertion -->	
	</body>
</html>