I've added a youtube video to my website that starts automatically at boot-up on the home page. The video opens as bootstrap modal pop up. However, when pop up closes, the video starts playing again in the background.
First, I want the video to start automatically.
Second, the video is automatically stopped when "pop up" is turned off.
Third, don't let the pop-up video start playing again in the background.
Version * Bootstrap v3.0.3
Thank you in advance for your help.
<!-- POPUP SCRIPT -->
<script>
$(document).ready(function(){
$("#myModal").on("hidden.bs.modal",function(){
$("#iframeYoutube").attr("src","#");
})
})
$(document).ready(function(){
$("#myModal").modal("show");
$("#myBtn").click(function(){
$("#myModal").modal();
});
});
</script>
<!-- HEADER -->
<header id="header" class="main__header"> </header>
<!-- POPUP BAŞLANGIÇ -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="background-color: #f9f9f900;">
<div class="modal-body" style="padding: 0px;">
<button type="button" class="close" style="padding:8px; background: white;" data-dismiss="modal">×</button>
<iframe id="iframeYoutube" width="100%" height="450px" alt="1" src="https://www.youtube.com/embed/example?&autoplay=1;rel=0&showinfo=0&controls=0&" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<!-- POPUP BİTİŞ -->
Firstly, you should trigger a function when pop-up is closed.This function should stop video to be played in the background.
$("#modal-close-button").click(function () {
$("#video-stop-button").click();
});
$("#video-stop-button").click(function () {
alert("The video should stop as the modal closes because a click on the close button will trigger the stop button ");
});
You should call this function whenever your pop-up is closed to prevent video to be played in the background.
Related
Good day,
I am building a web app using EJS, Express and Node. In this app I want to pass some data to my bootstrap-modal window. The problem is that I am passing correctly the string to the modal but only the first 75 chars! the rest is getting cut.
In the table I am showing this button next to each row:
<td><button type="button" class="btn btn-primary" data-tomodal=<%=JSON.stringify(MyList[index])%> data-toggle="modal" data-target="#exampleModal">Edit</button></td>
The incomplete code of the modal is:
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
...
</div>
</div>
</div>
</div>
To read the data from the modal that I am passing I use this script.
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('tomodal') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
console.log(recipient)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
The thing is that, it works but it only shows the first 75 chars!.
Additionally, this is the best way I found to aproach this problem, seeing the trouble I am having maybe is not the best way to go, so any tips would be very helpful.
Thank you.
I've made use of an off-canvas menu that comes in from the left without any trouble. At the bottom of the off-canvas menu there's a close button. Is there anyway to make the close button on an off canvas menu sticky?
For users, it is awkward (and not obvious) to have to scroll to the bottom to find the bottom, especially on long menus.
EDIT: Added some sample code: On the live site there might be 80 links (rather than 3), and I want the div with the close button to always be visible at the bottom of the current screen when the off-canvas menu is visible.
<div class="row">
<button type="button" class="button hide-for-large" data-toggle="filterCanvas">Filters</button>
</div>
<div class="row">
<div class="off-canvas-wrapper">
<div class="off-canvas off-canvas in-canvas-for-large position-left float-left" id="filterCanvas" data-off-canvas>
<div class="sidebar">
<p><strong>List of options</strong></p>
<div class="clearfix">
Link1
Link2
Link3
</div>
<div class="buttons hide-for-large text-center">
<button class="button expanded" data-toggle="filterCanvas">Close</button>
</div>
</div>
</div><!-- /filterCanvas -->
<div class="off-canvas-content float-left" style="min-height: 300px;margin-left:15px;" data-off-canvas-content>
<div class="view-content" style="margin-bottom: 20px;">
Page content here
</div>
</div><!-- /off-canvas-content -->
</div><!-- /off-canvas-wrapper -->
</div><!-- /row -->
Would be easier if you posted some code...
But, saying that, you could position the open/close button relative to the viewport, that way you could just have it fixed to the bottom left, and just adjust it when open.
As said, we would need some code though for this to be useful.
Edit: Based upon code sample provided
So given your example, you could do something as simple as the below, and just toggle the 'activated' class when opening/closing the menu.
<!-- The below button doesnt need to be in a row, as will be fixed,
the activated class will only be present when the sidebar is
open and not by default -->
<button type="button"
class="button hide-for-large off-canvas-button activated"
data-toggle="filterCanvas">Filters</button>
<div class="row">
<-- example code removed for brevity -->
</div><!-- /off-canvas-content -->
.off-canvas-button {
position: fixed;
left: 2em; // change to desired space from edge
bottom: 2em; // change to desired space from edge
}
.off-canvas-button.activated {
left: 6em; // adjust to suit with of sidebar (example is 4em)
}
in my page
foreach ($json->items as $sam) {
$link= $sam->id->videoId;
echo''.$link.'';
//its showing last 5 youtube video id ok.. i set every video id witha button for modal
echo'<button type="button" data-toggle="modal" data-target="#PlayModal" class="btn btn-outline btn-danger">Play</button>';
}
but when im trying to open a model by box in new winddow pop up there only show 1st video ID. modal not getting '.$link.' valu in popup window. modal code puting same page blew finish {}
echo'<div class="modal inmodal" id="PlayModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated bounceInRight">
<div class="modal-body">
<p>'.$name.'</p>
<div class="modal-footer">
<button type="button" class="btn btn-outline btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>';
According to the code given, even the first video should not play.
it is not printing the value of LINK inside the button, so it will not work.
Unless you have a JAVASCRIPT code observing the click and playing the video on click.
You can create the HTML code first manually containing the 5 video ID, and each video should have a button (according to your description), when clicked it will open the modal.
once that is done, you will be able to use php for each to properly echo the html code.
alternatively, the videos are in HTML list, and javascript will handle the event click, reading the video ID and passing to the player in the modal.
in either case, you need to understand the HTML structure first.
Problem: when Reveal data is taller than window height, scrolling moves the close icon off the page. I want to make it sticky so that you always have the option of closing the page without scrolling back up to the top.
I have tried loading the foundation 6 .sticky example into the reveal, but none of my attempts have been successful.
This is what I think should work, which is loaded into the reveal container <div id="modal2" style="height: 100%"></div> via ajax. Unfortunately, the close button just scrolls with the content.
<script>
// this script cannot be located in the layouts.js,
// because the trigger doesn't exist at page load.
$('#close-modal2').click(function(){
// $('#modal2').foundation('close'); didn't work for some reason.
// 'open' closes all other modals, so it accomplishes what I need.
$('#modal').foundation('open');
});
</script>
<div>
<button id="close-modal2" class="close-button sticky"
aria-label="Close reveal" type="button" data-sticky>
<span aria-hidden="true">×</span>
</button>
</div>
<div id="paragraph-wrapper" data-sticky-container>
<div class="row">
<div class="small-11 small-centered columns">
<div> Lots of content here, enough to overflow window...</div>
<div> Losts of content here..... etc.</div>
</div>
</div>
</div>
Am I missing something? Has anyone else been able to get a sticky close button in a reveal?
The basic behaviour of the Reveal is to close if the user clicks outside of the reveal container, so a user does already have a quick way of exiting the reveal.
However, you could also use position: fixed; on the close element.
That would keep it in the same spot while the modal scrolled up and down.
CSS
#modal2 > .close-button {
position: fixed;
top: 1rem; //or whatever
right: 2rem; //or whatever
}
e.g. in a Fiddle
Using position: fixed; is a bit of a pain for styling and mobiles but that will be depending on your particular design.
I am using Materialize in app ruby on rails and want video stop closing modal Materialize.
Help me please.
<% #chapter.episode.each do |episode| %>
<a class="btn modal-trigger" href="#<%= episode.name %>"><%= episode.name %></a>
<div id="<%= episode.name %>" class="modal">
<i id="close" title="Cerrar" class=" modal-action modal-close waves-green right material-icons">close</i>
<div class="modal-content">
<video id="<%= episode.name %>" width="320" height="240" controls>
<source id="<%= episode.name %>" src="<%= episode.url %>" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'">
Your browser does not support the video tag.
</video>
</div>
</div>
<% end %>
First of all, you are setting the same id for multiple tags (div, video, source). ID must be unique in entire document.
Considering that you want to stop video when modal close, you can use the callback for complete event (modal close), in your Javascript/jQuery code:
$(document).ready(function(){
var videos = $("video");
$('.modal-trigger').leanModal({
complete: function() {
videos.each(function(){
this.pause();
});
}
});
});
This will pause all videos when modal close.
I know this is an old question, but it came up for me in search. I solved it by adding video into modal when it opens, then removing it when it closes. Here's my work.
$(document).on('click','.video-butt',function(){
$('#video-modal .video-container').html('<iframe id="myIframe" width="300" height="200" src="' + $(this).attr('href') + '?rel=0" allowfullscreen="true" ></iframe>'); // embed video
$('#video-modal').modal('open');
return false;
})
function videoTrash(){ //remove video embed on close
$('#video-modal .video-container').empty();
}
$('#video-modal').modal({onCloseEnd:videoTrash}); // initialize materialize modal
html
<div id="video-modal" class="modal black">
<div class="modal-content white-text">
<div class="video-container"></div>
</div>
</div>
the trigger link
<a class="btn btn-flat video-butt" href="https://www.youtube.com/embed/hO4tW8Py2xc">watch the video</a>