I am working on a fiddle in which I want to resize/drag/drop an image over a youtube video.
In the above fiddle, I cannot resize the image at fast pace over the youtube video. I am not sure what are the reasons behind it. I can resize/drop/drag but not at a very fast pace.
The HTML/JS I have used in order to achieve the above fiddle is:
HTML:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
<div id="wrapper" style="display:inline-block">
<img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>
JS(JQuery):
$(function() {
$('#wrapper').draggable();
$('#image').resizable();
});
Problem Statement:
I am wondering what changes I should make in the HTML code so that I am able to resize the Google Image properly. At this moment, it seems like I am not able to resize the image at fast pace.
youtube video complicates it, so create an overlay over video and make it visible when resize event starts, and hide when resize stops.
$('#image').resizable({
start: function( event, ui ) {
$('#overlay').show();
},
stop: function( event, ui ) {
$('#overlay').hide();
}
}
);
});
working code: https://jsfiddle.net/obn4yph0/
Related
I have a play image with text 'Watch video', when clicked would open up a bootstrap modal window to play the video i put in. I've got the moday view to work. The problem I'm having with this is when I play the video and exit the screen while it is being played, the video continues to play in the background. If I click on the Watch Video link again, it would play the video from where it stopped off previously.
I need to have the video stop when the modal window is closed. It needs to then play the video from the start the next time I click the "Watch video" link. I'm still new to this and am not sure how to do this. Anyone know how I can achieve this?
<div class="col-md-12 f-play" data-toggle="modal" data-target="#myModal">
<img class="f-play-image" src="images/play.svg" data-target="#myModal" data-video-fullscreen="">Watch video
</div>
<div id="myModal" class="modal fade" role="dialog" tabindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/7pvci1hwAx8?" allowfullscreen="" width="640" height="360" frameborder="0"></iframe>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I managed to get it to work with the link that #Leo provided. But it was slow as it reloaded the frame everytime the link was clicked. Tried #guillesalazar solution from Twitter Bootstrap Modal stop Youtube video and it worked perfectly. This was the solution I used.
$("#myModal").on('hidden.bs.modal', function (e) {
$("#myModal iframe").attr("src", $("#myModal iframe").attr("src"));
});
Well you can simply remove the src of the iframe and the put back again like ;
<iframe id="videosContainers" class="yvideo" src="https://www.youtube.com/embed/kjsdaf ?>" w></iframe>
<span onclick="stopVideo(this.getAttribute('vdoId'))" vdoId ="yvideo" id="CloseModalButton" data-dismiss="modal"></span>
now the Jquery part
function stopVideo(id){
var src = $j('iframe.'+id).attr('src');
$j('iframe.'+id).attr('src','');
$j('iframe.'+id).attr('src',src);
}
You just need to stop the video on the hidden.bs.modal event:
$('#myModal').on('hidden.bs.modal', function () {
player.stopVideo();
// or jQuery
$('#playerID').get(0).stopVideo();
// or remove video url
$('playerID').attr('src', '');
})
Here is a very similar (if not equal) to what you need to do: http://www.tutorialrepublic.com/codelab.php?topic=faq&file=play-youtube-video-in-bootstrap-modal
They do not use the iframe API so everytime they close the modal they just delete the video url .attr('src', '');
For multiple modals with iframe videos, here is the solution:
$('#myModal').on('hidden.bs.modal', function(e) {
var $iframes = $(e.target).find('iframe');
$iframes.each(function(index, iframe){
$(iframe).attr('src', $(iframe).attr('src'));
});
})
On modal close, it goes through all the iframe videos and resets them instead of resetting all of them to the first video.
// Simple and clean
Try using class or ID before Iframe to refresh/reload the particular video. Otherwise, it will reload all iframe source.
$( id/class + 'iframe').attr('src', $('iframe').attr('src'));
**If you want to open modal with iframe and remove on close best and short answer**
test = function (){
$('#test_tutorial').modal('show').on('hidden.bs.modal', function (e) {
$("#test_tutorial iframe").attr("src", "");
}).on('show.bs.modal', function (e) {
$("#test_tutorial iframe").attr("src", $("#test
_tutorial iframe").attr("data-src"));
});
}
Late to the party, but some people may find this useful in the future. In my case I had a real struggle achieving this due to the video being embedded from a div with a video element in the iframe, not with the src directly in the iframe element, like this:
<iframe>
<div class="videoContainer">
<video src="#"></video>
</div>
</iframe>
I solved this with the following approach:
$('#myModal').on('hidden.bs.modal', function() {
$('iframe').contents().find('video')[0].pause();
});
It also pauses the video instead of refreshing the url/replacing the src attribute by the same value, as suggested in the accepted answer.
I am trying to build a carousel with videos and the carousel part is somewhat working, but the video player is not.
This is how the HTML looks like
<div class='col-sm videoCarouselMain redSectionUnderline'>
#foreach ($videos as $video)
<div class="videoCarouselMainItem">
<video id="playerYt" controls="controls" poster="{{mediaObj($video)}}">
<source src="{{$video->youtube}}" type="video/youtube">
</video>
</div>
#endforeach
</div>
And this is the initialisation script
$(document).ready(function() {
$('#playerYt').mediaelementplayer({
alwaysShowControls: false,
videoVolume: 'horizontal',
features: ['playpause','progress','volume','fullscreen']
});
});
What happens is when I click on the first slide to play the video it somewhat plays, although looks messy (which is probably fixable with CSS after some tinkering). My bigger question and problem is once second slide and video is chosen, that video won't play and I assume it has something to do with the id being the same, however I am not sure how to fix that. Any help is much appreciated! If any other code is needed to better understand my issue let me know! :)
Imagine that i have a constant animation running, rather it be css, javascript, or in this case for the sake of simplicity a .gif file, and then i append to the DOM a "heavy" element like a youtube iframe and the constant animation get sluggish for a second.
Is there any straightforward or workaround way to achieve such DOM change without staggering the animation?
In the example below notice that if you change the iframe for yet another gif or even one iframe with a fairly simple website the animation runs without staggering or getting sluggish.
Demo/Example: http://codepen.io/anon/pen/xbdewR
stackoverflow is throwing a warning that links to codepen.io must be accompanied with code, it is my first time posting so i hope this is what it is asked for:
$('.button').on('click', function(e) {
// Sluggish
$('.video-container').html('<iframe width="560" height="315" src="//www.youtube.com/embed/FprQEGc3Za4" frameborder="0" allowfullscreen></iframe>');
// Not Sluggish
//$('.video-container').html('<img src="http://media2.giphy.com/media/e7FOBuKCDtwWI/giphy.gif"/>');
// Not Sluggish
//$('.video-container').html('<iframe width="560" height="315" src="http://html5doctor.com/" frameborder="0" allowfullscreen></iframe>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://media.giphy.com/media/lRBEntSxN87WE/giphy.gif" alt="" />
<div class="video-container">
<a class="button" href='#'>wait for the gif to load completely and press me</a>
</div>
Unfortunately, there is no solution to your problem... It is a matter of web browsers.
This post may help you: Why does my spinner GIF stop while jQuery ajax call is running?
Loading an iframe is going to cause massive delay with loading, layout and DOM changes.
You may be able to decrease some of that impact by making the iframe display: none until it's needed, then rendering it with display: block .. not sure if you have enough control over the iframe video to be able to make it not autoplay even if it's invisible, though.
You can do the following :
write the html code for your iframe with style as display : none
<iframe width="560" height="315" src="//www.youtube.com/embed/FprQEGc3Za4" frameborder="0" style="display:none;" allowfullscreen></iframe>
and when you click the button then the code js code should be :
$('.button').on('click', function(e){
$('iframe').css('display','block');
});
in this way your gif file won't be sluggish.
I have a question regarding Orbit Slider.
I want to place a youtube video in the slider.
I used div and embed to replace img and was successful. The video can play and stop.
My question is how can I make the slider's timer stop when user presses PLAY on the video in the slider?
If you look at the Orbit slider javascript it works using events. Look for these bits of code in the Orbit JS file
this.$element.bind('orbit.start', function (event, index) {
self.startClock();
});
this.$element.bind('orbit.stop', function (event, index) {
self.stopClock();
});
These bind the events 'orbit.stop' and 'orbit.start' events to the HTML element (which usually has an ID 'featured' when using the Foundation way of setting up Orbit). So if you trigger these events e.g. 'orbit.stop' from the HTML element it will call the function stopClock(). The following should help...
HTML
<a id="stop-button" href="#" class="button rounded">stop</a>
<a id="start-button" href="#" class="button rounded">start</a>
Javascript
$('#stop-button').on('click',function(){
$('#featured').trigger('orbit.stop');
});
$('#start-button').on('click',function(){
$('#featured').trigger('orbit.start');
});
/*using the setup
<div id="featured">
<img src="../images/orbit-demo/demo1.jpg" />
<img src="../images/orbit-demo/demo2.jpg" />
<img src="../images/orbit-demo/demo3.jpg" />
</div>
*/
I have a 940x520px JPG on my webpage inside of a DIV and I would like to make it a link so when you click on it a YouTube video of 940x520px replaces the JPG and automatically starts playing.
What would be the best way of using Javascript to make this work?
Thanks
Use an onClick (or click if you are using jQuery) to repalce the image with the code for the embedded youtube player.
<div class="image">
<img class="img" />
</div>
<div class="youtube" style="display:none;">
<!--Youtube code here-->
</div>
<script>
$(document).ready(function () {
$(".img").click(function () {
$(".image").hide();
$(".youtube").show();
});
});
</script>