

	<!--IFTS_NO_PARSE-->
	<!--multilang_start-->



	<!--flexmodul: iwe-->





<!--/flexmodul: iwe-->

<!--flexmodul: bild_bilder-->






<!--flexmodul: videomodul-->




<style>

#flex_100_6{
	margin-bottom: 30px;
}

#flex_100_6 .video_wrapper .video_trigger{
padding-left: 30px;
padding-right: 30px;
}

#flex_100_6 input.button{
	border: none;
	padding: 5px 20px;
	border-radius: 3px;
	font-size: 0.875em;
	font-weight: 600;

	cursor: pointer;
}

#flex_100_6 input.button:hover {
    background-color: rgb(98, 0, 2);
}














@media (min-width: 1187px) {






}

@media (min-width: 992px) and (max-width: 1188px) {





}

@media (min-width: 600px) and (max-width: 992px) {





}

@media (max-width: 600px) {




#flex_100_6 .bild img{
		width: 100%;
	}



}



</style>







<section class="content-texteditor content-video   " id="flex_100_6"  style="">


		<div class="app_content">
		<style>
		.video_wrapper {
			background-image: url( '' );
			background-size: cover;
			position: relative;
			box-shadow: 0px 3px 5px #333;
			height: 400px;
			width: 100%;
		}
		.video_wrapper .video_trigger:before {
			content: '\f04b';
			font-family: 'FontAwesome';
			position: absolute;
			z-index: -1;
			font-size: 120px;
			color: rgba( 255, 255, 255, .2 );
			/* width: 120px; */
			height: 120px;
			line-height: 120px;
			text-align: center;
			top: -webkit-calc( 50% - 60px );
			top: calc( 50% - 60px );
			left: -webkit-calc( 50% - 60px );
			left: calc( 50% - 60px );
		}
		.video_wrapper .video_trigger {
			/* padding: 130px 30px; */
			/*
			height: -webkit-calc( 100% - 260px );
			height: -moz-calc( 100% - 260px );
			height: -o-calc( 100% - 260px );
			height: calc( 100% - 260px );

			width: -webkit-calc( 100% - 60px );
			width: -moz-calc( 100% - 60px );
			width: -o-calc( 100% - 60px );
			width: calc( 100% - 60px );
			*/
			position: absolute;
			bottom: 0;
			/* z-index: 9; */
			background-color: rgba( 0, 0, 0, .6 );
			color: #fff;
		}
		.video_wrapper .video_layer {
			position: relative;
			display: none;
			height: inherit;
			width: inherit;
			margin: auto;
		}
		.video_wrapper .video_layer iframe {
			border: 0px none transparent;
			height: inherit;
			width: inherit;
		}
                .font_black {
                        color: black;
                 }
		</style>
		<script src="/javascripts/jquery-1.11.3.min.js"></script>
		<script src="/javascripts/jquery-migrate-3.0.1.js"></script>
		<script src="/javascripts/FooTable-2/js/footable.js"></script>
		<script language="javascript" type="text/javascript">
		(function($) {

			$( document ).ready( function() {
				if( $( '.video_wrapper' ).length > 0 ) {
					$( '.video_wrapper' ).each( function() {

						_wrapper = $( this );
						_wrapper.children( '.video_trigger' ).children('p').children( 'input[type="button"]' ).click( function() {
							_trigger = $( this ).parent();
							_trigger.hide();
							_wrapper.children( '.video_layer' ).show().children( 'iframe' ).attr( 'src', 'https://www.youtube.com/embed/4gC8MA9F2i0' );
						});
					});
				}
			});
		})(jQuery);
		</script>


		<div  class="video_wrapper" style="background-image: url( '' );">
			<div class="video_trigger" data-source="aqz-KE-bpKQ">
				<p class="text-center">Zum Aktivieren des Videos müssen Sie auf die Schaltfläche unten klicken. Wir möchten Sie darauf hinweisen, dass nach der Aktivierung Daten an YouTube übermittelt werden.
				<br>
				<br>
				<input type="button" class="button btn_primary" value="YouTube-Video laden" />
				</p>

			</div>
			<div class="video_layer"><iframe src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen border="0" title="Video"></iframe></div>
		</div>


</div>



			<!--**XEFn:videoplayer XEFw:youtube **XE-->
			<!--**XEFn:videofile XEFw:https://www.youtube.com/embed/4gC8MA9F2i0 **XE-->
			<!--**XEFn:videoimage XEFw: **XE-->
			<!--**XEFn:videoundertitle XEFw: **XE-->



</section>








<!--/flexmodul: videomodul-->
<!--flexmodul: wordmodul_mit_bild-->




<!--/flexmodul: wordmodul_mit_bild-->




<!--flexmodul: osm_karte-->

 <link rel="stylesheet" href="/stylesheets/openlayer3/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="/javascripts/openlayer3/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="/javascripts/openlayer3/ol.js"></script>

<style>
      .marker {
       /* width: 5px;
        height: 5px; */
       /* border: 1px solid black;*/
       /* border-radius: 10px;*/
       /* color: darkred; */
        /*opacity: 0.9;*/
      }
      .label {
        text-decoration: none;
        color: white;
        font-size: 11pt;
        font-weight: bold;
        text-shadow: black 0.1em 0.1em 0.2em;
      }
      .popover-content {
        min-width: 180px;
      }
#map{
		width: 100%;
		max-width: 535px;
		height: 370px;
	  }
    </style>





<div id="map" class="map"></div>
    <div style="display: none;">

		


		<a class="overlayosm label" id="label1" target="_blank" href="http://gelterswoog.com/" title="Strandbad Gelterswoog">Strandbad Gelterswoog</a>
		<div class="marker  glyphicon" id="marker1" title="Marker"><img src="/images/marker.png"></div>
		



    </div>
    <script>
      var layer = new ol.layer.Tile({
        source: new ol.source.XYZ({
			url: 'http://a.tile.openstreetmap.org/{z}/{x}/{y}.png' })
      });
      var kaiserslautern = ol.proj.fromLonLat([7.692969, 49.396138]);
	</script>

	
		<script>
		var pos1 = ol.proj.fromLonLat([7.692969, 49.396138]);
		</script>
		

     <script>


      var map = new ol.Map({
        layers: [layer],
        target: 'map',
        view: new ol.View({
          center: kaiserslautern,
          zoom: 14
        })
      });

	  </script>

	  

		<script>
		  //  marker
		  var marker1 = new ol.Overlay({
			position: pos1,
			positioning: 'center-center',
			element: document.getElementById('marker1'),
			stopEvent: false
		  });
		  map.addOverlay(marker1);

		  //  label
		  var labelname1 = new ol.Overlay({
			position: pos1,
			element: document.getElementById('label1')
		  });
		  map.addOverlay(labelname1);
		</script>

		


	<div id="osm" style="font-size: 0.9em;">© <a href="http://www.openstreetmap.org">OpenStreetMap</a>
   und <a href="http://www.openstreetmap.org/copyright">Mitwirkende</a>,
   <a href="http://creativecommons.org/licenses/by-sa/2.0/deed.de">CC-BY-SA</a>
 </div>

<div class="clearfix"></div><div class="voffset1"></div>




<!--/flexmodul: osm_karte-->
















		<!--IFTS_NO_PARSE-->
		<!--multilang_end-->




