Youtube Video Player Embeds in infobox

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