Hi there,
I'm building a globe from a cartodb, trying to get some youtube player embeds from my cartodb to appear but they are not showing up. All i get is an extended infobox window but no player.
Is this a function that can be done in Ceisum? Or am i going about this the wrong way?
Many thanks!
Hello,
In order to embed a youtube video, you have to enable the iframe in the InfoBox to play scripts.
Here’s an example:
var viewer = new Cesium.Viewer(‘cesiumContainer’);
var iframe = document.getElementsByClassName(‘cesium-infoBox-iframe’)[0];
iframe.setAttribute(‘sandbox’, ‘allow-same-origin allow-scripts allow-popups allow-forms’);
var pinBuilder = new Cesium.PinBuilder();
var bluePin = viewer.entities.add({
description: ‘’,
position : Cesium.Cartesian3.fromDegrees(-75.170726, 39.9208667),
billboard : {
image : pinBuilder.fromColor(Cesium.Color.ROYALBLUE, 48).toDataURL(),
verticalOrigin : Cesium.VerticalOrigin.BOTTOM
}
});
viewer.zoomTo(bluePin);
``
Best,
Hannah
Thanks Hannah! Worked great in cesium's sandbox.
Another quick question when i put it in my local install i get a setAttribute error
"Uncaught TypeError: Cannot read property 'setAttribute' of undefined"
This is my local file. I wanna try and pull the iframe from a table in cartodb. My alternative method was to use ur code and manually enter the points i have in my cartodb, but i couldn't get that to work on my local file due to the error.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Al Jazeera End of Year Encyclopedia 2015</title>
<script src="Cesium/Cesium.js"></script>
<style>
@import url(Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.11/cartodb.core.js"></script>
<script src="../src/cesium-cartodb.js"></script>
<script>
// Carto DB basemaps
var basemapProvider = new Cesium.CartoDBImageryProvider({
url: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
credit: 'Basemap courtesy of CartoDB'
});
var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider: basemapProvider,
baseLayerPicker: true,
fullscreenButton: true,
homeButton: true,
timeline: false,
navigationHelpButton: true,
animation: false,
scene3DOnly: false,
geocoder: true,
infoBox: true
});
// Tile data layer
var layerData = {
user_name: 'interactiveajdesign',
sublayers: [{
sql: "SELECT * FROM aje_final_barry_to_check",
cartocss: '#aje_final_barry_to_check{ marker-fill: #FFCC00; marker-width: 10; marker-line-color: #FFF; marker-line-width: 1.5; marker-line-opacity: 1; marker-fill-opacity: 0.9; marker-comp-op: multiply; marker-type: ellipse; marker-placement: point; marker-allow-overlap: true; marker-clip: false; marker-multi-policy: largest;}'
}]
};
cartodb.Tiles.getTiles(layerData, function (tiles, err) {
if (tiles == null) {
console.log("error: ", err.errors.join('\n'));
return;
}
viewer.scene.imageryLayers.addImageryProvider(new Cesium.CartoDBImageryProvider({
url: tiles.tiles[0],
credit: 'Al Jazeera English news event data gathered from 2015'
}));
});
// SQL API layer (rendered by Cesium - bubbles)
var dataSource = new Cesium.GeoJsonDataSource();
viewer.dataSources.add(dataSource);
var sql = new cartodb.SQL({user: 'interactiveajdesign', format: 'geoJSON'});
sql.execute("SELECT * FROM aje_final_barry_to_check")
.done(function (data) {
dataSource.load(data)
.then(function () {
})
})
.error(function (errors) {
// errors contains a list of errors
console.log("errors:" + errors);
});
;
</script>
</body>
</html>
Here’s the link i’m trying to get the iframe to work in
http://mohsinali.com/preview/cesium-cartodb-master/examples/cajsa_endofyear2015.html
Dear Hannah,
I have tried your example code using CesiumJS. Though the iframe settings for infobox were specially made to allow scripts, the blocked script execution error still occurred.
And my code to embed the youtube video is as follows,
<html>
<head>
<meta charset="utf-8" />
<title>Cesium Demo</title>
<script type="text/javascript" src="./Sandcastle-header.js"></script>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.74/Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="./bucket.css" />
</head>
<body>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer');
var iframe = document.getElementsByClassName('cesium-infoBox-iframe')[0];
iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-popups allow-forms');
var pinBuilder = new Cesium.PinBuilder();
var bluePin = viewer.entities.add({
description: '<iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms" width="400" height="300" src="https://www.youtube.com/embed/ACJJi5re5NU" frameborder="0" allowfullscreen></iframe>',
position : Cesium.Cartesian3.fromDegrees(-75.170726, 39.9208667),
billboard : {
image : pinBuilder.fromColor(Cesium.Color.ROYALBLUE, 48).toDataURL(),
verticalOrigin : Cesium.VerticalOrigin.BOTTOM
}
});
viewer.zoomTo(bluePin);
</script>
</body>
</html>
The error is that “Blocked script execution in ‘URL’ because the document’s frame is sandboxed and the ‘allow-scripts’ permission is not set.” And thus the video cannot be displayed. I also edited the iframe settings of the youtube video. It did not make sense.
Hope your comments.
And by the way, are there any other ways to put youtube videos into cesium or even put them on a billboard or a wall of 3D models?
Many thanks for your help.
Eric.