JSFiddle - React, Tailwind, and code Playground

by introvert

HTML

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<title>Te Whanga nui a Tara</title>
<h1>Te Whanga nui a Tara</h1>
<h2>Wellington</h2>
<div id="map-div" style="width: 512px;height: 512px;"></div>

JavaScript

function onFeatureSelect(clickInfo) {
        clickedFeature = clickInfo.feature;
        if (clickedFeature.attributes.video == "video") {
        popup = new OpenLayers.Popup.FramedCloud(
                "featurePopup",  // an ID for this popup
                clickedFeature.geometry.getBounds().getCenterLonLat(), // anchor to the icon
                new OpenLayers.Size(240,360),  // set height and width of the window
            clickedFeature.attributes.name+"<br>" + // HTML displayed inside the window
        clickedFeature.attributes.desc+"<br>" +
                 "<a href="+clickedFeature.attributes.webpage+">"+"Visit"+"</a><br>",
                null,                 // used for other applications
                true,                 // have an [x] to close the Popup
                onPopupClose  // call another function when the Popup is closed
         );
    } else {
        popup = new OpenLayers.Popup.FramedCloud(
                "featurePopup",  // an ID for this popup
                clickedFeature.geometry.getBounds().getCenterLonLat(), // anchor to the icon
                new OpenLayers.Size(240,360),  // set height and width of the window
            clickedFeature.attributes.name+"<br>" + // HTML displayed inside the window
        clickedFeature.attributes.desc+"<br>" +
                 "<a href="+clickedFeature.attributes.webpage+">"+"Visit"+"</a><br>"+
"<br><iframe src='" + clickedFeature.attributes.video + "' width='350' height='220' frameborder='0' allowfullscreen></iframe>",
                null,                 // used for other applications
                true,                 // have an [x] to close the Popup
                onPopupClose  // call another function when the Popup is closed
         );
    }

    // let feature and popup 'know' about each other
    clickedFeature.popup = popup;
    popup.feature = clickedFeature;
    // add the popup to the map
    map.addPopup(popup);
}

function onFeatureUnselect(clickInfo) {
   ...