JSFiddle - React, Tailwind, and code Playground
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) {
feature = clickInfo.feature;
if (feature.popup) {
// if an icon with a popup window is un-selected, that popup is removed
popup.feature = null;
map.removePopup(feature.popup);
...