responsive embedded youtube - javascript

I want to have a responsive youtube video on my website. I need it to look good on desktop and mobile.
this is the code I try:
.iframe-container{
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
}
.iframe-container iframe{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
<!--Gallery section-->
<section id="songs" class="gallery main brd-bottom">
<div class="container">
<h1>נזילה בגוף - מוראס (אודיו)</h1>
<div class="iframe-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/krhum9lNoXw"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
<h1 class="large list-inline-item">
<a href="https://www.youtube.com/watch?v=krhum9lNoXw"
class="hover-effect"><i class="icon-youtube"></i> </a>
</h1>
<h1 class="large list-inline-item">
<a href="https://open.spotify.com/artist/3YX6pjxMfcQ1r2yPJaxpBi"
class="hover-effect"><i class="icon-spotify"></i> </a>
</h1>
</div>
<!--End song-->
</div>
<!-- End container -->
</section>
<!--End gallery section-->
This is how it's currently looking at my website:
I'm new to CSS and HTML so if I forgot to upload anything, let me know and I'll add it.
to see the website I'm working on you can check: http://nhrnhr0.pythonanywhere.com/
Thank you!

From the docs: you should use the player setSize method
If you want this to be done when you resize your page, use the window.resize event (as described in MDN)
In short:
window.onresize = function() {
// make sure the player variable is global or visible in current scope in your code
player.setSize(window.innerWidth, window.innerHeight);
}

Related

Hide iframes using javascript

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;
}

getelementbyid to load pages in iframe

does anyone know how to make a button in HTML load another HTML page inside of an iframe?
I don't understand online tutorials for this, and here's what I tried :
<div class="flex-container"> <!-- la sidebar et le iframe seront dedans -->
<div class="sidebar">
<button style="margin-top: 100px;" onclick="Function1">Thés</button>
<button>Tisanes</button>
<button>Théières</button>
</div>
<!--FUNCTION1-->
<script>
function Function1() {
document.getElementById(src="accueil.html").innerHTML = src="Thés.html" TARGET="iframe";
}
</script>
<iframe src="accueil.html" frameborder="0" style="border: none; width: inherit; height: 710px; id="iframe">
</iframe>
</div>
</body>
</html>
Is this even how it's supposed to be done? Cause nothing is happening when the button Thés is clicked.
I'm quite new and I'm bad with javascript. Thanks if anyone has the patience to explain this to me.
<div class="sidebar">
<button style="margin-top: 100px;" onclick="Function1()">Thés</button>
<button>Tisanes</button>
<button>Théières</button>
</div>
<iframe src="./accueil.html" frameborder="0" style="border: none; width: inherit; height: 710px;" id="iframe">
</iframe>
<!--FUNCTION1-->
<script>
function Function1() {
const iFrame = document.getElementById('iframe');
iFrame.src = "Thes.html";
console.log(iFrame)
}
</script>

Prevent users from getting url from embedded YouTube video/disable clipboard

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>

Bootstrap - three equal columns doesn't change line on 'a' element

I have some iframes (YouTube videos) and I want to put a link over the iframe. What I want to do is to place every link exactly over the iframe, but this is happening only for the first row (the first 3 iframes), while the others (4th link and beyond) it's been placing next to third link.
Here is the code
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
openEffect: 'none',
closeEffect: 'none',
nextEffect: 'none',
prevEffect: 'none',
padding: 0,
margin: [20, 60, 20, 60] // Increase left/right margin
});
$('iframe').each(function() {
var source = $(this).attr('src');
$(this).attr('src', source + "&showinfo=0&rel=0&controls=2");
});
$('iframe').addClass('col-xs-12 col-md-4');
$('iframe').attr('href', '#');
var width = $('iframe').width();
$('iframe').css({
'height': 0.6 * width + 'px'
});
var height = $('iframe').height();
$('p').each(function() {
$(this).prepend('<a href="' + $(this).find('iframe').attr('src') + '" class="wrapper col-xs-12 col-md-4 fancybox fancybox.iframe"><a/>');
})
//$('.wrapper').width(width);
$('.wrapper').height(height);
.entry-content p {
margin: 0 0 0 0 !important;
}
.entry-content p iframe {
margin-bottom: 30px;
display: inline-block;
}
.wrapper {
border: none;
position: absolute;
vertical-align: baseline;
float: left !important;
z-index: 9999 !important;
}
.fancybox-type-iframe .fancybox-nav {
width: 60px;
}
.fancybox-type-iframe .fancybox-nav span {
visibility: visible;
opacity: 0.1;
}
.fancybox-type-iframe .fancybox-nav:hover span {
opacity: 1;
}
<link href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" rel="stylesheet" />
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="content-left-wrap col-md-12">
<div class="entry-content">
<p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&showinfo=0&rel=0&controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
</p>
<p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&showinfo=0&rel=0&controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
</p>
<p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&showinfo=0&rel=0&controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
</p>
<p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&showinfo=0&rel=0&controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
</p>
<p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&showinfo=0&rel=0&controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
</p>
<p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&showinfo=0&rel=0&controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
</p>
<p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&showinfo=0&rel=0&controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
</p>
</div>
</div>
</div>
You can alse find a snippet at https://jsfiddle.net/vg734x3u/1/ and see the result here.
Thank you!
I observed a typo when you prepend an anchor to each p element. <a/> shall be </a>. I also observed a semicolon is missing. If you run JSHint on the fiddle, you will see the problem.
Anyway check out this fiddle. It puts a link over each iframe by modifying the style sheet either. You can start from here and make the layout of your page prettier.

video gets hidden via javascript but already starts to play (autplay-mode) even it's not visible?

i wanted to find a simple method to get a custom preview-image to my videos within my blog by hiding them and make them visible right after click on the preview-image. the user Dominic Green helped me to get it started with the following code. the problem is: the video already starts to play (even if it is hidden) in autoplay-mode right after the page load but i want to have the autoplay to start right after click on the preview-image...
here's my code:
<!doctype html>
<script type="text/javascript">
$(window).load(function(){
$(".video").hide();
$(".loader").click(function(){
$(this).hide();
$(this).parent().find(".video").show();
});
});
#container .post .postimg img{
width:100%;
height:auto;
}
#container .post .postvideo{
position:relative;
display:block;
width:100%;
height:430px;
background-color:#0F3;
}
#container .post .postvideo .con{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:1;
}
#container .post .postvideo .video{
background-color:#C00;
}
#container .post .postvideo .video iframe{
width:100%;
height:100%;
}
#container .post .postvideo .loader{
background-color:#06C;
}
#container .post .postvideo .loader img{
width:100%;
height:100%;
}
<div class="post">
<div class="postvideo">
<div class="con video">
<iframe width="420" height="315" src="http://www.youtube.com/embed/v_MVwUqrwDc?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
<div class="con loader">
<img src="http://cache2.allpostersimages.com/p/LRG/27/2728/9CKND00Z/poster/gulin-darrell-pansy-flowers-floating-in-bird-bath-with-dew-drops-sammamish-washington-usa.jpg" width="758" height="388">
</div>
</div>
</div><!--! end of .post -->
<div class="post">
<div class="postvideo">
<div class="con video">
<iframe src="http://player.vimeo.com/video/29017795?title=0&byline=0&portrait=0&color=a80101&autoplay=1" width="460" height="259" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<div class="con loader">
<img src="http://cache2.allpostersimages.com/p/LRG/27/2728/9CKND00Z/poster/gulin-darrell-pansy-flowers-floating-in-bird-bath-with-dew-drops-sammamish-washington-usa.jpg" width="758" height="388">
</div>
</div>
</div><!--! end of .post -->
You will need to use,
YouTube JavaScript Player API
Alternatively,
Put this as url (autoplay off)
http://www.youtube.com/embed/v_MVwUqrwDc?rel=0&autoplay=0"
And on click of button change src to
http://www.youtube.com/embed/v_MVwUqrwDc?rel=0&autoplay=1"
This wont be as smooth as js api, but will do the trick.
If you don't want to use youtube API or vimeo API, I'd suggest you have iframe src empty and set it when the loader div is clicked. so
I will use
<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>
and
<div class="con loader" data-iframe-src="http://www.youtube.com/embed/v_MVwUqrwDc?rel=0&autoplay=1">
then in click event of js code, just set the data-iframe-src value to iframe src:
$(this).parent().find(".video iframe").attr("src", $(this).attr("data-iframe-src"));

Categories

Resources