So what I'm trying to do is have fullscreen video across my website. But I would like to auto play a youtube video and automatically in fullscreen (The size of the browser window). My site navigation is left and right arrows that slide from page to page. Then up and down arrows that scroll up and down each page.
But the only thing I'm trying to get done is autoplay a youtube video in fullscreen, again, the size of the browser window. Or am I going to have to host the video myself? Which may be easier, but will take up bandwidth that I'll have to pay for. Anyway thank you in advance for your help, cheers!
This was pretty well answered over here: How to make a YouTube embedded video a full page width one?
If you add '?rel=0&autoplay=1' to the end of the url in the embed code (like this)
<iframe id="video" src="//www.youtube.com/embed/5iiPC-VGFLU?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
of the video it should play on load. Here's a demo over at jsfiddle.
I found 2 solutions ✌ for embedding YouTube video in HTML
Only HTML No JS
in this solution we set players option in iframe parameter
body {
overflow-x: hidden;
}
.video-container {
width: 100vw;
height: 100vh;
overflow: hidden;
position: relative;
}
iframe {
position: absolute;
top: -10%;
width: 100vw;
height: 117vh;
pointer-events: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Youtube Html</title>
</head>
<body>
<div class="video-container">
<iframe
src="https://www.youtube.com/embed/rUWxSEwctFU?mute=1&modestbranding=0&autoplay=1&autohide=1&rel=0&showinfo=0&controls=0&disablekb=1&enablejsapi=1&iv_load_policy=3&loop=1&playsinline=1&fs=0&playlist=rUWxSEwctFU"></iframe>
</div>
</body>
</html>
With JS (prefer this) 💯
See codepen
Chrome Doesn't Support Automatic Fullscreen But You Can Play A Video As Simple As This:
<iframe width="640" height="360" src="youryoutubeurlhere" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
This will help to autoplay the video onload and will make it full screen but the video running will have to be muted due to the Chrome Autoplay Policy.
// https://jsfiddle.net/jlam55555/o5njka95/6/
function requestFullScreen(element) {
// Supports most browsers and their versions.
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullscreen;
if (requestMethod) { // Native full screen.
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
// FullScreen function
function makeFullScreen() {
document.getElementsByTagName("iframe")[0].className = "fullScreen";
var elem = document.body;
requestFullScreen(elem);
}
iframe.fullScreen {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
<body onload="makeFullScreen()">
<iframe src="https://www.youtube.com/embed/668nUCeBHyY?autoplay=1&mute=1&controls=0&rel=0" frameborder="0" allow="autoplay; picture-in-picture" title="YouTube Embed"></iframe>
</body>
Related
I've been tasked with creating a sort of Kiosk to display in an office, the Kiosk is suppose to cycle through the various advertising videos that I've been given, this part is easy enough as I found another post about that, however after each video they want a news stream to play for 10 minutes, then for the kiosk to go to the next video, and continue like this. the stream I'm trying to use is the embedded iframe for the sky news YouTube stream
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/9Auq9mYxFEE?controls=0"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
I've tried a few things like trying to hide the existing element and show the other, but unfortunately I've never used HTML before being tasked with this so it's going about as well as can be expected
This is what I'm doing to display and cycle through the videos
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
{
box-sizing: border-box;
}
#video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
max-height: 100%;
max-width: 100%;
background-color: black;
}
</style>
</head>
<body>
<video src="Video1.mp4" id="video" autoplay></video>
<script>
var vidElement = document.getElementById('video');
var vidSources = [
"Video1.mp4",
"video2.mp4",
"Video3.mp4"
];
var activeVideo = Math.floor((Math.random() * vidSources.length));
vidElement.src = vidSources[activeVideo];
vidElement.addEventListener('ended', function(e) {
// update the active video index
activeVideo = (++activeVideo) % vidSources.length;
if(activeVideo === vidSources.length){
activeVideo = 0;
}
// update the video source and play
vidElement.src = vidSources[activeVideo];
vidElement.play();
});
</script>
</body>
</html>
I've tried adding to the existing script to preform the task of hiding the stream, by either setting the display of the element to none or by changing the hight and width to 0, neither of which worked for me. so either,
<iframe src="https://www.youtube.com/embed/9Auq9mYxFEE?controls=0&autoplay=1" title="YouTube video player" id="youtubeplay" frameborder="0"</iframe>
<script>
document.getElementById("youtubeplay").style.display = 'none';
</script>
or
<iframe src="https://www.youtube.com/embed/9Auq9mYxFEE?controls=0&autoplay=1" title="YouTube video player" id="youtubeplay" frameborder="0"</iframe>
<script>
var liveElement = document.getElementById('youtubeplay');
liveElement.display = 'block'
liveElement.style.max-height = '0%';
liveElement.style.max-width = '0%';
</script>
I haven't gotten as far as trying to change the video back after 10 minutes as my attempts at hiding the video to start with didn't work, any help would be appreciated.
Please also let me know if this is the completely wrong way of trying to do something like this.
Have you tried doing it with jquery like this:
`$("#youtubeplay").removeAttr("hidden");
setTimeout(function(){
$("#youtubeplay").prop("hidden", "true");
},600000)`
The code is deleting attribute hidden from the element with the id "youtubeplay" and after 10 minutes (60'0000 milliseconds) adds it back so the video disappears, I hope you know jQuery but if you don't here's a code in regular JavaScript:
document.getElementById("youtubeplay").removeAttribute("hidden");
setTimeout(function(){
document.getElementById("youtubeplay").setAttribute("hidden", "true");
},600000)
I am trying to create a browser (I got bored) and I want the user to be able to navigate between tabs.
This would need me to hide one iframe and show another one. I'm not sure how to do this using javascript. I also don't want the iframe to resize (like saying height: 0px;).
Here's my sandbox.
Thanks in advance.
You can add custom CSS to your iframe dynamically to hide and show.
Refer following code,
<!DOCTYPE html>
<html>
<head>
<style>
.custom-style {
width: 0;
height: 0;
position: absolute;
border: 0;
}
</style>
</head>
<body>
<iframe id="iframe"
width="300" height="200" src="https://www.youtube.com/embed/zFZrkCIc2Oc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br/>
<button onclick="onHide();">Hide Me<button>
<button onclick="onShow();">Show Me<button>
</body>
<script>
function onHide() {
document.getElementById('iframe').classList.add('custom-style');
}
function onShow() {
document.getElementById('iframe').classList.remove('custom-style');
}
</script>
</html>
wrap your iframe inside a div container and when you need to hide it just add a style or class to it and set it display style to none
html
<div class="hide">
<iframe></iframe>
</div>
css
.hide{
display: none;
}
I was wondering if this is possible :
I have a movie with a Play button.
After click, the movie begins to play.
When the movie finish, I have a picture which cover my movie div.
Which options to use in my function:
<video src="video.com" id="myVideo">
</video>
<div class="images">
<img scr="some_pic.jpg" />
</div>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
const img = document.querySelector("img")
const video = document.querySelector("video")
function myHandler(e) {
// now the video has to hide, and show the img:
video.style.display = "none:
img.style.display = "block"
}
</script>
There are various options, including replacing the <video> tag with an <image> tag.
The easiest one I can think of is to have the image on a layer under the video, then when the video finishes, you can change layers (put image as the front layer and now video in the back layer).
When image is under the video, it has same size and position so to end-user it's invisible. This is set through the <style=> part where z-index is the layer position (higher number puts it above others of a lower number). The top and left options are the positions of up/down and left/right settings.
You can try using: (in the code below, I change their positions (not aligned) so you can see what is happening)...
<!DOCTYPE html>
<html>
<body>
<video id="myVideo" width="550" height="400" controls style=" z-index: 2; top: 50px; left: 100px; position: absolute; );">
<source src="some_video.mp4" type="video/mp4">
</video>
<div id="myPic" class="images" width="550" height="400" style=" z-index: 1; top: 80px; left: 140px; position: absolute; );">
<img src="some_pic.jpg" />
</div>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended', myHandler, false);
const img = document.getElementById('myPic');
const video = document.getElementById('myVideo');
function myHandler(e)
{
// now the video has to hide, and show the img:
//video.style.display = "none:
//img.style.display = "block"
//# swap their layer positioning
img.style.zIndex = "2"; //# makes top
video.style.zIndex = "1"; //# makes bottom
}
</script>
</body>
</html>
I'm not sure if there's something else to it other than simply showing an image when the video is not playing, if that's not the case, the video tag has a poster attribute:
<video controls poster="/images/w3html5.gif">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
I have a website where I embed a YouTube video in an iframe. My problem is that I don't want the user to get the videoID or the link to the video (atleast without opening the console because that's propably impossible).
I already managed to disable the YouTube logo on which one can click at to open the video in a new tab. But there is the context menu if you rightclick on the video where one can copy the video url to his clipboard and so on.
After a lot of research if found out that there is no possibility to disable the context menu somehow because that would be cross-site-scripting.
Another possible method would be to constantly check the users clipboard if there is some string in it containing the videoID. This won't work aswell (except in IE i guess) because there are some restrictions to access the clipboard so i can't find out what the user saves in it (even with flash).
It would also be enough to just check if the clipboard content changed to detect that the user maybe tried to get the videoURL (it's no problem if he finds out the video url as long as I know about it).
Disabling the clipboard at all or spamming it with something else seems impossible too.
I hope there is a solution to my problem, thanks.
Edit:
this is the used HTML including some scripts (aswell as some that are not working)
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
console.log("READY");
event.target.playVideo();
}
function onPlayerStateChange() {
console.log("STATE CHANGED");
}
</script>
<body>
<div class="all">
<?php
include "parts/header.php";
?>
<div class="player-bg">
<div class="player">
<iframe
id="player"
width="640"
height="390"
frameborder="0"
sandbox="allow-forms allow-scripts allow-pointer-lock allow-same-origin allow-top-navigation"
src="<?=$embedURL?>">
</iframe>
</div>
</div>
<div class="usercontrols-container">
<form id="form" method="post" action="./views.php" autocomplete="off">
<input class="textfield" type="text" min="0" name="guessViews"/>
<a class="button" href="#" onclick="document.getElementById('form').submit();">Guess</a>
</form>
</div>
</div>
</body>
<script>
function copy() {
console.log("copy detected 2");
}
document.addEventListener("copy", function() {
console.log("copy detected 1");
});
</script>
Blakk
You can add event listeners for the copy, and cut events.
You can't copy any text.
<br/>
<textarea>You can't copy any text.</textarea>
<script>
document.body.addEventListener("copy", function(e){
e.preventDefault();
e.stopPropagation();
});
document.body.addEventListener("cut", function(e){
e.preventDefault();
e.stopPropagation();
});
</script>
You could also put the video inside a tag without controls and add the controls via buttons.
<video width="320" height="240" id="vid">
<source src="https://www.w3schools.com/htmL/movie.mp4" type="video/mp4">
</video>
<button onClick="document.getElementById('vid').play()">Play</button>
<br/>
<button onClick="document.getElementById('vid').pause()">Pause</button>
You can also cover the iframe with a div overlay and prevent the contextmenu event.
#frame{
position: absolute;
top: 10px;
left: 10px;
width: 150px;
height: 150px;
}
#overlay{
position: fixed;
top: 10px;
left: 10px;
width: 155px;
height: 155px;
background-color: transparent;
z-index: 1000;
}
<iframe width="150" height="150" id="frame">
</iframe>
<div id="overlay"></div>
<script>
document.getElementById("overlay").addEventListener("contextmenu", function(event){
event.preventDefault();
event.stopPropagation();
});
</script>
Tip: You can add an overlay to the iframe this will prevent also right click. But you need a way to satrt and stop the video with an API.
Example:
<div class="player-bg">
<div class="player">
<div id="overlay" style="
width: 560px;
height: 315px;
background: transparent;
position: absolute;
"></div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/raa5ki4hVp8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
</div>
</div>
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]]]-->
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.
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