Adding a overlay layer on an embedded vimeo player - javascript

So Here's the video that i'm embedded to my website.
Fiddle.
<iframe src="https://player.vimeo.com/video/152985022?title=0&byline=0&portrait=0" width="300" height="169" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
The problem is, it's small and the play and other buttons button covers the half screen.
so is there any way to add a layer image on the player and when you click on the image the video should start playing.

http://codepen.io/anon/pen/grPeyq
this is what I could come up with, you can replace the button with an image,
button is disabled until video player is "ready", this requires jquery 2.1.4
$(function() {
document.getElementById("playbutton").disabled = true;
var player = $('iframe');
var playerOrigin = '*';
// Listen for messages from the player
if (window.addEventListener) {
window.addEventListener('message', onMessageReceived, false);
} else {
window.attachEvent('onmessage', onMessageReceived, false);
}
function onMessageReceived(event) {
var data = JSON.parse(event.data);
console.log(data.event);
if (data.event === "ready") {
//attach ready function to the image
document.getElementById("playbutton").disabled = false;
$('#playbutton').click(function() {
player[0].contentWindow.postMessage({
"method": "play"
}, playerOrigin);
$(this).remove();
});
}
}
});
#container {
position: relative
}
<div id="container">
<button style ="position:absolute; top:0; left:0;width: 300px;height:169px" id="playbutton">
Play
</button>
<iframe src="https://player.vimeo.com/video/152985022?title=0&byline=0&portrait=0&api=1" width="300" height="169" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

I would offer you this solution :
http://jsfiddle.net/yehiaawad/hgtvqatm/2/
HTML
<div id="vidFrame" class="play">
<iframe id="vimeo-video" src="http://player.vimeo.com/video/152985022?title=0&byline=0&portrait=0" width="300" height="169" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
<img id="vimeo-id" width="300" height="169" src="" />
</div>
JAVASCRIPT:
callback=?', {format: "json"}, function(data) {
$("#vimeo-id").attr("src",data[0].thumbnail_large);
});
$("#vimeo-id").on("click",function(){
$(this).fadeOut();
var player=$f($("#vimeo-video")[0]);
player.api("play");
})
CSS:
#vimeo-id,iframe{
position:absolute;
}
#vimeo-id{
cursor:pointer;
}

Related

is there a way to reload after removing an iframe?

The 1 and 3 are id of button and v1 and v3 are id of iframe(youtube emmbedded).
i have already used a simple .show() and .hide() but the audio remained of hidden iframe so i am using .remove() and .show().
when i use .remove() the other iframe is gone completely and only iframe remains is of that button which i pressed which i want.
however when i press button 3 the removed iframe is not able to load, is there a way to reload it?
the iframes i am using are :-
<iframe width="560" height="315" id="v1" src="https://www.youtube.com/embed/xGRjCa49C6U?modestbranding=1&controls=0&autoplay=1&loop=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" ></iframe>
<iframe width="560" height="315" id="v3" src="https://www.youtube.com/embed/9V9wr1AaIxY?modestbranding=1&controls=0&autoplay=1&loop=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" ></iframe>
and this is the js:-
$(function(){
$('#1').on('click',function(){
$('#v1').show();
var getframe = document.getElementById("v3");
getframe.remove();
});
$('#3').on('click',function(){
$('#v3').show();
var getframe = document.getElementById("v1");
getframe.remove();
});
});
Remove() method removes the element from the dom and its hard to reload.
So this can be done like the following.
Load YouTube iFrame API:-
<script src="https://www.youtube.com/iframe_api"></script>
Create two different players that references the existing iFrames
$(function(){
window.YT.ready(function() {
var player1 = new YT.Player('v1');
var player3 = new YT.Player('v3');
$('#1').on('click',function(){
$('#v1').show();
player1.unMute();
$('#v3').hide();
player3.mute();
});
$('#3').on('click',function(){
$('#v3').show();
player3.unMute();
$('#v1').hide();
player1.mute();
});
});
});
Demo
Hope this helps

Sending data form javascript to servlet: getting the data about a fellow nested element next to a button

I have this simple html with a video div and a button:
<div class = "video-row">
<iframe width="560" height="315" src="https://www.youtube.com/embed/QmHCn5xXHjI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="add-button green-button light-button">Add video</div>
</div>
I want to send a data the video's src to a java servlet on button click:
$(document).on("click", ".add-button", function () {
sendData();
});
var sendData = function() {
$.ajax({
url: "addcomedian",
type: "post", //send it through get method
data: {
number: 4,
sender: "add-button",
url: url,
},
success:
...
}
How do I get the url of the video which is the value of src tag? There would be many videos like that on a page and an add button for each video.
Find the clicked element parent, then find the iframe child:
$(document).on("click", ".add-button", function (event) {
var button = $(event.target); // Find the button that was clicked
// Find the video element, first finding the parent
var videoElement = button.parents(".video-row").find("iframe");
console.log(videoElement.attr("src")); // get the 'src' attribute
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "video-row">
<iframe width="160" height="90" src="https://www.youtube.com/embed/QmHCn5xXHjI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="add-button green-button light-button">Add video</div>
</div>

Remap button to div in javascript

I found a very helpful guide explaining basic vimeo-controllers with froogaloop.
I have very limited understanding of javascript and would need some assistance remapping the controller buttons to divs.
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<iframe id="player1" src="https://player.vimeo.com/video/76979871?api=1&player_id=player1" width="630" height="354" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<button>Play</button>
<button>Pause</button>
<div class="play">Play</div> <!-- I want to use this div instead of buttons -->
<script>
$(function() {
var iframe = $('#player1')[0];
var player = $f(iframe);
// When the player is ready, add listeners for pause, finish.
player.addEvent('ready', function() {
status.text('ready');
player.addEvent('pause', onPause);
player.addEvent('finish', onFinish);
});
// Call the API when a button is pressed
$('button').bind('click', function() {
player.api($(this).text().toLowerCase());
});
});
</script>
The codepen I've been referring:
https://codepen.io/bdougherty/pen/JgDfm
Thanks!
Honestly I calling something according to the innerhtml of a button makes for a weird decision. It makes the code confusing and will break as soon as a designer decides that an arrow is better than play.
But for your question I would go with this:
$(function() {
var iframe = $('#player1')[0];
var player = $f(iframe);
// When the player is ready, add listeners for pause, finish.
player.addEvent('ready', function() {
status.text('ready');
player.addEvent('pause', onPause);
player.addEvent('finish', onFinish);
});
// Call the API when a button is pressed
$('.play').bind('click', function() {
player.api('play');
});
$('.pause').bind('click', function() {
player.api('pause');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<iframe id="player1" src="https://player.vimeo.com/video/76979871?api=1&player_id=player1" width="630" height="354" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<div class="play">Play</div>
<!-- I want to use this div instead of buttons -->
<div class="pause">Pause</div>

Swapping content of div, on click on image or iframe (Vimeo)

I have some issue:
I have some container, and three elements below this div. Three elements are images or iframe with vimeo embedded movie.
In first case i have :
<div id="media-content">
<iframe src="https://player.vimeo.com/video/1271?api=1" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
And below:
<div class="media-list" id="media-list">
<span> <?php echo $this->Html->image('placeholder/video2.jpg');?> </span>
<span> <?php echo $this->Html->image('placeholder/video3.jpg');?> </span>
<span>
<iframe src="https://player.vimeo.com/video/127561?api=1" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</span>
</div>
And Jquery:
var media = $('#media-list img');
var mediaContainer = $('#media-content');
$(media).on('click',function(e){
var vals = $(this).parent().html();
$(mediaContainer).html(vals);
e.preventDefault();
console.log (e.target);
});
And now what this code does:
On clicking on video2.jog or video3.jpg, iframe in <div id="media-content"> is replaced with this clicked image. And this is ok.
But i want to show vimeo movie <div id="media-content"> on click at iframe inside.
So it's simple content swap, but the problem is, that i don't know how "transfer" vimeo iframe do another div, as clicking on it does nothing.
Thank You for any reply.
PS: To address this question, i send image, it shows 3 red spans and one big green div. CLicking on span should set his attr (in this case img).And this work, problem is,that clicking on vimeo span should open video in green div.enter image description here
When the browser loads/makes ready the DOM then iframe isn't included instantly. For the shake javascript or jquery canot get the inside element of the iframe as DOM haven't it, rather javascript or jquery only get the iframe tag.This is a critical and great problem with jquery & iframe when iframe load thing from different domain/host.
You can also get the iframe element by getting the span with jquery. But for this you have to give the 3rd span a a div and have to click on the div not on the iframe content to get desired solution.
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div id="media-content">
<iframe src="https://player.vimeo.com/video/1271?api=1" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
<div class="media-list" id="media-list">
<span> <?php echo $this->Html->image('placeholder/video2.jpg');?> </span>
<span> <?php echo $this->Html->image('placeholder/video3.jpg');?> </span>
<span >
<div style="border: 1px solid red; z-index:3;width:80px;height:80px;padding:30px;">
<iframe src="https://player.vimeo.com/video/127561?api=1" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</span>
</div>
<script>
$(document).ready(function () {
var media = $('#media-list img');
var mediaContainer = $('#media-content');
$(media).on('click',function(e){
var vals = $(this).parent().html();
$(mediaContainer).html(vals);
e.preventDefault();
console.log (e.target);
});
var media2 = $('#media-list div');
$(media2).on('click',function(e){
var vals = $(this).html();
$(mediaContainer).html(vals).height("70%").width("70%");
e.preventDefault();
console.log (e.target);
});
});
</script>

Change YouTube iframe src with jQuery

I am trying to change a YouTube video iframe source with jQuery, but looks like running into cross origin issue. My jquery code:
var videourl = $(".videourl").html();
$(".actualyoutube iframe").attr('src',videourl);
iframe gets new src value, but no video is displayed. Any ideas?
extended explanation:
There is a popup div with embeded youtube video
<div class="youtubepopup">
<div class="closeyoutube">X</div>
<div class="actualyoutube">
<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>
</div>
</div>
There is a certain td which contains a new src url. There is no other place or way to get this url except from this td.
<td class="videourl">//youtube.com/whatevervideo</td>
And there is a script that should add src on open popup and remove on closing.
var videourl = $(".videourl").html();
$(".youtubecap").click(function() {
$(".actualyoutube iframe").attr('src', videourl);
$(".youtubepopup").fadeIn('slow');
});
$(".closeyoutube").click(function() {
$(".youtubepopup").fadeOut('slow');
$(".actualyoutube iframe").removeAttr('src');
});
$(".youtubepopup").click(function() {
$(".youtubepopup").fadeOut('slow');
});
p.s. now that i laid it out, user3385530 is probably right
You cannot show pages from www.youtube.com inside an iframe. The correct way is to use their video embed codes inside your web page. IFrame embeds are easier, the URL you need to display in an iframe looks like this:
http://www.youtube.com/embed/VIDEO_ID_GOES_HERE
Just place an iframe such as this inside your web page:
<div class="actualyoutube">
<iframe width="560" height="315" src="http://www.youtube.com/embed/VIDEO_ID_GOES_HERE" frameborder="0" allowfullscreen></iframe>
</div>
Finally, assuming you are able to extract video id from the URLs using jQuery, you can use this to display videos*:
var videoid = "S2ISrpNM-0s";
$(".actualyoutube iframe").remove();
$('<iframe width="420" height="315" frameborder="0" allowfullscreen></iframe>')
.attr("src", "http://www.youtube.com/embed/" + videoid)
.appendTo(".actualyoutube");
* Changing the src property of an iframe that is already displaying a YouTube video did not work; I therefore suggest destroy-iframe-recreate-iframe approach.
<div class="service-video-media">
<iframe id="main-play" width="560" height="315" src="https://www.youtube.com/embed/uTcj2v85y34" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="video-list">
<img src="https://img.youtube.com/vi/uTcj2v85y34/1.jpg" video-id="uTcj2v85y34" />
<img src="https://img.youtube.com/vi/jRuR4GaSsBI/1.jpg" video-id="jRuR4GaSsBI" />
<img src="https://img.youtube.com/vi/ec7aQPLSBsU/1.jpg" video-id="ec7aQPLSBsU" />
<img src="https://img.youtube.com/vi/uTcj2v85y34/1.jpg" video-id="uTcj2v85y34" />
<img src="https://img.youtube.com/vi/jRuR4GaSsBI/1.jpg" video-id="jRuR4GaSsBI" />
<img src="https://img.youtube.com/vi/ec7aQPLSBsU/1.jpg" video-id="ec7aQPLSBsU" />
</div>
</div>
<script>
jQuery(document).ready(function(){
jQuery('.video-list img').on('click',function () {
var videoId = jQuery(this).attr('video-id');
var videoUrl = 'https://www.youtube.com/embed/'+videoId;
jQuery('#main-play').attr('src',videoUrl);
});
});
</script>
This will not work because page is parsed and only on refresh with new ulr will happen.
You need to use ajax to pre-load the page with new url and then to set iframe.

Categories

Resources