I have the next url: http://www.climatempo.com.br/tempo-no-seu-site/videos/selo/sul/420x315.
It points to a youtube video, but "the google video id" can change all day, because is a url to weather forecast. Only the url above is fixed.
I am using a digital signage software from a third party and I need create a layout to load this url.
With the software, when creating the layout I can enter the url above, and add custom html and script when the layout will be running.
I have checked with IE the source code when the url is loaded. It ́s something as:
<html>
<title>Climatempo - Selo de Videos: SUL</title>
<body bgcolor="black" style="padding:0!important;margin:0!important" >
<iframe width="420" height="315" src="https://www.youtube.com/embed/YPlee8K0ViE" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Is possible create a javascript such as when I load the url: http://www.climatempo.com.br/tempo-no-seu-site/videos/selo/sul/420x315 it transforms this page to add "autoplay=1" as:
<html>
<title>Climatempo - Selo de Videos: SUL</title>
<body bgcolor="black" style="padding:0!important;margin:0!important" >
<iframe width="420" height="315" src="https://www.youtube.com/embed/YPlee8K0ViE?autoplay=1" frameborder="0" allowfullscreen></iframe>
</body>
</html>
I can use only javascript, no jquery. Some help will be appreciated.
Thanks in advance, Luiz
////////////////// Sorry, Mr Oliver, It doesnt work. Here is the source code of the page:
<!doctype html>
<html lang="en">
<head>
<title>Xibo Open Source Digital Signage</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=874.31921824104" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Copyright 2006-2014 Daniel Garner. Part of the Xibo Open Source Digital Signage Solution. Released under the AGPLv3 or later. -->
<style type="text/css">
body {
margin: 0;
overflow: hidden;
font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
}
h1, h2, h3, h4, p {
margin-top: 0;
}
#iframe {
border: 0;
}
.cycle-slide p, p.cycle-slide {
margin-bottom:0;
}
</style>
<style type="text/css">
</style>
<link href="modules/preview/fonts.css" rel="stylesheet" media="screen"><style type="text/css"></style>
</head>
<!--[if lt IE 7 ]><body class="ie6"><![endif]-->
<!--[if IE 7 ]><body class="ie7"><![endif]-->
<!--[if IE 8 ]><body class="ie8"><![endif]-->
<!--[if IE 9 ]><body class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><body><!--<![endif]-->
<div id="content"><html>
<title>Climatempo - Selo de Videos: SUL</title>
<body bgcolor="black" style="padding:0!important;margin:0!important" >
<iframe id="myframe" width="420" height="315" src="http://www.climatempo.com.br/tempo-no-seu-site/videos/selo/sul/420x315" frameborder="0" ></iframe>
</body>
</html>
</body>
</html></div>
</body>
<script src="modules/preview/vendor/jquery-1.11.1.min.js"></script><script src="modules/preview/xibo-layout-scaler.js"></script><script type="text/javascript">
function EmbedInit()
{
// Init will be called when this page is loaded in the client.
var firstIframe = document.getElementsById("myframe");
//get the current source
var src = firstIframe.src;
//update the src with "autoplay=1"
var newSrc = src+'?autoplay=1';
//change iframe's src
firstIframe.src = newSrc;
return;
}
</script><script type="text/javascript"> var options = {"originalWidth":"874.31921824104","originalHeight":"436.5342019544","previewWidth":"1255.6954397394104","previewHeight":"626.9495114006552","scaleOverride":0}; $(document).ready(function() { EmbedInit(); });</script>
</html>
<!--[[[CONTROLMETA]]]-->
asked Feb 3, 2016 at 19:32
Luiz Alves
2,6794 gold badges46 silver badges89 bronze badges
2 Answers 2
Try something like this:
HTML:
<html>
<title>Climatempo - Selo de Videos: SUL</title>
<body bgcolor="black" style="padding:0!important;margin:0!important" >
<iframe id = "myFrame" width="420" height="315" src="https://www.youtube.com/embed/YPlee8K0ViE" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Javascript:
var iFrame = document.getElementById("myFrame");
iFrame.src = iFrame.src + '?autoplay=1';
iFrame.contentWindow.location.reload();
Hope this helps.
answered Feb 3, 2016 at 19:39
Derek Pollard
7,1856 gold badges45 silver badges62 bronze badges
Sign up to request clarification or add additional context in comments.
7 Comments
Luiz Alves
It doesnt work, mr Oliver, please see my post edited with more informations. I only have src="youtube.com/embed/YPlee8K0ViE after the page loaded.
Derek Pollard
So are you grabbing the contents of that page and then displaying the HTML on your page?
Luiz Alves
Originally, I have only the url climatempo.com.br/tempo-no-seu-site/videos/selo/sul/420x315 to load the content. I need access this page and make autoplay=1
Luiz Alves
Sorry, no result. I can see the youtube video, but it is stopped. No autoplay.
Derek Pollard
View the source of the iframe with your dev tools inspector and let me know what the source says
|
So google have IFRAME API, but I'm not sure this will work with your software. Have you given this a thought.
https://developers.google.com/youtube/iframe_api_reference#Requirements
UPDATED - doesn't stop after 6 seconds.
HTML :
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
Javascript:
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'YPlee8K0ViE',
events: {
'onReady': onPlayerReady
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
My Code Example: http://codepen.io/anon/pen/YwOVPR
3 Comments
devtye
I also had the id as storing the video id as a data attribute. Then grab that before you create the iframe for the video. Example: codepen.io/anon/pen/obPeoG
Luiz Alves
sorry, but I have no access to videoid. I have a static url climatempo.com.br/tempo-no-seu-site/videos/selo/sul/420x315 It´s a public service of weather forecast in Brazil. Each day, if I want see the video I need only the url and a new youtube with other video id is loaded. I need a code working only with the url above.
devtye
@LuizAlves I thought you had the option to grab it directly from YouTube. I'm sorry, let me see if I can come up with a different solution for you.
default