/* Document Ready Script */
document.ready = function( callback ) {
if( document.readyState != 'loading' ) {
callback();
}
else {
document.addEventListener( 'DOMContentLoaded', callback );
}
};
/* Automattically resize the iFrame */
var iFrame2C = {};
iFrame2C.rescale = function( iframe, format ) {
let formatWidth = parseInt( format.split(':')[0] );
let formatHeight = parseInt( format.split(':')[1] );
let formatRatio = formatHeight / formatWidth;
var iframeBounds = iframe.getBoundingClientRect();
let currentWidth = iframeBounds.width;
let newHeight = formatRatio * currentWidth;
iframe.style.height = Math.round( newHeight ) + "px";
};
/* Resize iFrame */
function iframeResize() {
var iframes = document.querySelectorAll( 'iframe[data-scaling="true"]' );
if( !!iframes.length ) {
for( var i=0; i < iframes.length; i++ ) {
let iframe = iframes[ i ];
let videoFormat = '16:9';
let is_data_format_existing = typeof iframe.getAttribute( 'data-format' ) !== "undefined";
if( is_data_format_existing ) {
let is_data_format_valid = iframe.getAttribute( 'data-format' ).includes( ':' );
if( is_data_format_valid ) {
videoFormat = iframe.getAttribute( 'data-format' );
}
}
iFrame2C.rescale( iframe, videoFormat );
}
}
}
/* Event Listener on Resize for iFrame-Resizing */
document.ready( function() {
window.addEventListener( "resize", function() {
iframeResize();
});
iframeResize();
});
/* Source-URLs */
/*
data_type will be the value of the attribute "data-type" on element "video_trigger"
data_souce will be the value of the attribute "data-source" on element "video_trigger", which will be replaced on "{SOURCE}"
*/
function get_source_url( data_type ) {
switch( data_type ) {
case "youtube":
return "https://www.youtube-nocookie.com/embed/{SOURCE}?rel=0&controls=0&showinfo=0&autoplay=1&mute=1";
case "google-maps":
return "https://www.google.com/maps/embed?pb={SOURCE}";
/* Add your own sources here */
/* Always set "{SOURCE}" as placeholder for individual data from attribute "data-source" */
case "open-street-maps":
return "https://www.openstreetmap.org/export/embed.html?bbox=7.638307709275979%2C51.95050407165732%2C7.645388741075295%2C51.953853244732045&layer=mapnik&marker=51.94893328430987%2C7.648498810885941";
default: break;
}
}
/* 2-Click Solution */
document.ready( function() {
var video_wrapper = document.querySelectorAll( '.video_wrapper' );
if( !!video_wrapper.length ) {
for( var i=0; i < video_wrapper.length; i++ ) {
let _wrapper = video_wrapper[ i ];
var video_triggers = _wrapper.querySelectorAll( '.video_trigger' );
if( !!video_triggers.length ) {
for( var l=0; l < video_triggers.length; l++ ) {
var video_trigger = video_triggers[ l ];
var accept_buttons = video_trigger.querySelectorAll( 'input[type="button"]' );
if( !!accept_buttons.length ) {
for( var j=0; j < accept_buttons.length; j++ ) {
var accept_button = accept_buttons[ j ];
accept_button.addEventListener( "click", function() {
var _trigger = this.parentElement;
var data_type = _trigger.getAttribute( "data-type" );
var source = "";
_trigger.style.display = "none";
source = get_source_url( data_type );
var data_source = _trigger.getAttribute( 'data-source' );
source = source.replace( "{SOURCE}", data_source );
var video_layers = _trigger.parentElement.querySelectorAll( ".video_layer" );
if( !!video_layers.length ) {
for( var k=0; k < video_layers.length; k++ ) {
var video_layer = video_layers[ k ];
video_layer.style.display = "block";
video_layer.querySelector( "iframe" ).setAttribute( "src", source );
}
}
_wrapper.style.backgroundImage = "";
/*_wrapper.style.height = "auto";*/
var timeout = 100; // ms
setTimeout( function() {
iframeResize();
}, timeout );
});
}
}
}
}
};
}
});
Skip to main content
UNSERE REFERENZEN:
ERFOLGS- BEISPIELE FÜR SIE.
Sie wollen mehr über bereits von uns umgesetzte Projekte erfahren?
Jeder Anforderung von Ihnen steht eine passende Referenz auf unserer Seite gegenüber. Sprechen Sie uns an – wir nennen Ihnen gerne entsprechende Beispiele!
Wir finden gemeinsam die Software, die zu Ihnen passt.
Mit System zum Projekterfolg. Wir bieten Ihnen je nach Bedarf alles rund um das Thema IT-Consulting. Wenn Sie mehr über bereits von uns umgesetzte Projekte erfahren wollen, sprechen Sie uns an. Wir nennen Ihnen gerne Referenzen, die Ihrer Aufgabe entsprechen.