I have a working code, that stops the video on modal close. However, I wonder is there a way to achieve the same results using Alpine.js only. Without having a separate JS as in my current case.
Here is my code:
<div x-show="videoModal">
<div #click.away="videoModal = false, handleClick(videoPlayer)">
<div id="videoPlayer">
<iframe src="https://www.youtube.com/embed/{{ $video_id }}"></iframe>
</div>
</div>
</div>
<script>
function handleClick(element) {
var iframe = element.querySelector( 'iframe');
if ( iframe ) {
var iframeSrc = iframe.src;
iframe.src = iframeSrc;
}
}
</script>
Related
In my website I have a problem with my modal. It is supposed to be triggered by an icon appearing close to the embed tags. Although it works to activate the modal, it just displays the modal-content without anything in it; after closing the modal and making a second click on the openModal() function the wanted embed file is displayed. Then when clicking another document it displays the preceding document until closed and clicked again. Why is this happening and what should I do to fix it?
HTML (but with only one embed) :
<div class = "overlay-cont">
<embed src="link-to-pdf.pdf" >
<div class = "overlay">
<img class = "enlarge-icon" src = "arrow-icon.svg" onclick ="openModal(0)">
</div>
</div>
<div id = "myModal" class = "modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<embed id = "currentDoc">
</div>
</div>
JavaScript:
var doc = document.getElementsByTagName("EMBED");
function openModal(n){
document.getElementById("myModal").style.display = "block";
document.getElementById("currentDoc").src = doc[n].src;
}
function closeModal(){
document.getElementById("myModal").style.display = "none"
}
Instead of having a static embed element and giving it dynamic src attribute value, generate dynamic embed element every time you show the modal and remove it every time you close the modal.
var doc = document.getElementsByTagName("EMBED");
function openModal(n) {
var modal = document.getElementById("myModal");
modal.style.display = "block";
var node = document.createElement("embed");
var src_attr = document.createAttribute("src");
src_attr.value = doc[n].src;
node.setAttributeNode(src_attr);
modal.appendChild(node);
}
function closeModal() {
var e = document.querySelectorAll("embed")[1];
e.parentNode.removeChild(e);
document.getElementById("myModal").style.display = "none"
}
<html>
<head>
</head>
<body>
<div class="overlay-cont">
<embed src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="overlay">
<img class="enlarge-icon" src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d" onclick="openModal(0)">
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content"></div>
</div>
</body>
</html>
On my site [ now at : http://gatecybertech.com/test but will be moved to main site later : http://gatecybertech.com ] you can click on the top right "Video" link to get to the videos section, after I played a few clips and closed the iFrame, if I click on the "Back" button on browser, the last video will be played again, but the strange thing is : I can hear the sound, but can't see the video ? So how to solve the problem by achieving one of the following :
[1] Show the video again in iFrame and play it normally
or
[2] Don't play the sound & don't show the video
Either of the above will do. How can I achieve that ?
My html looks like this :
<div class="tools-icon">
<img src=https://i.ytimg.com/vi/IgBIaZgoAQc/hqdefault.jpg?sqp=-oaymwEXCPYBEIoBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLDW3KcjXsTR5utmlvhFfibLe-bvRg width=170 height=110>
<p class="tools-icon__text">Keypad Pins Easily Stolen</p>
</div>
...
<!-- the modal div that will open when an anchor link is clicked to show the related video in an iframe. -->
<div id="modal" tabindex="-1">
<div class="content">
<h4 class="title"></h4>
<iframe class="yt-video" src="https://www.youtube.com/embed/A1nRiiWYgZw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="black_overlay" onclick="closeLightBox()" style="display: block;">
<div style=" z-index: 0; left: 76%; top: 17%; width: 22px; position: absolute;">
<a class="close" onclick = "return close_iFrame();"><h2>×</h2></a>
</div>
</div>
</div>
Script looks like this :
<script>
var modal = document.getElementById('modal'),
closeBtn = modal.querySelector('close'),
ytVideo = modal.querySelector('.content .yt-video'),
title = modal.querySelector('.content .title'),
anchors = document.querySelectorAll('a[data-target="modal"]'),
l = anchors.length;
for (var i = 0; i < l; i++)
{
anchors[i].addEventListener("click", function(e)
{
e.preventDefault();
title.textContent = this.dataset.videoTitle || 'No title';
ytVideo.src = this.href;
modal.classList.toggle('is-visible');
modal.focus();
});
}
modal.addEventListener("keydown", function(e)
{
if (e.keyCode == 27)
{
title.textContent = '';
ytVideo.src = '';
this.classList.toggle('is-visible');
}
});
</script>
<script language="javascript" type="text/javascript">
function close_iFrame()
{
var modal = document.getElementById('modal'),
ytVideo = modal.querySelector('.content .yt-video');
ytVideo.src = '';
modal.classList.toggle('is-visible');
}
</script>
OK, I figured it out, just make the following change :
<script language="javascript" type="text/javascript">
function close_iFrame()
{
var modal = document.getElementById('modal'),
ytVideo = modal.querySelector('.content .yt-video');
ytVideo.src = '';
modal.classList.toggle('is-visible');
history.go(-1);
window.location.href = '#Videos';
}
</script>
Recently we've found a bug that exists only in Safari on iPhone(s) however I cannot pinpoint the source of the issue. When pressing the play button the video appears to load but then closes immediately.
All answers I've found so far aren't recent and/or don't solve the problem. Testing in BrowserStack is giving me this error: Invalid CSS property declaration at: * from the www-embed-player-sprite-mode-vfl9mHoaB.css file served from Youtube.
I'm also open to optional ways of handling embedded videos to avoid this issue.
The code:
#set($showVideo = $request.getParameter("showVideo"))
#set($howItWorksID = $placeholder.getAttributeValueGroup().getAttributeValue('product_howitworks', $sesShoppingCart.getLocale()))
#set($embeddedURL = "https://www.youtube.com/embed/" + $howItWorksID + "?rel=0")
#set($hasVideoID = false)
#if( $howItWorksID && $howItWorksID != "" )
#set( $hasVideoID = true )
#end
<div id="howItWorksModal" class="modal-howItWorks modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<button type="button" class="close js-modalClose close--howItWorks" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">close</span>
</button>
<div>
<div class="prose howItWorks-embedVideoWrapper">
<div class="iframe-container">
<iframe id="howItWorks-ModalVersion" class="howItWorks js-howItWorks-iframe" width="100%" src="" frameborder="0" allowfullscreen preload></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
jQueryReady(function() {
var videoURL = "$embeddedURL";
// Load destination video and autoplay when modal opens
$("#howItWorksModal").on('shown.bs.modal', function(ev) {
ev.preventDefault();
$("#howItWorks-ModalVersion").attr("src", videoURL + "&autoplay=1");
console.log('clicked on');
});
// Kill video when modal is closed
$('#howItWorksModal').on('hidden.bs.modal', function (e) {
$('.js-howItWorks-iframe').each( function(){
$(this).attr('src', '');
});
});
// Kill mobile video if playing while window is resized
function mobileVideoSource(){
var mobileBlock = $('#BuyNow-mobileBlock'),
howToVid_mobile = $('#howItWorks-MobileVersion');
if (mobileBlock.is(":hidden")) {
// if mobile block is hidden remove it's source
howToVid_mobile.attr('src', '');
} else {
// if mobile block is displayed add a source
howToVid_mobile.attr('src', videoURL);
}
}
sdi.window.on('resize', mobileVideoSource);
})
mobileVideoSource() was being called and removing the src when the video was opening. I did not investigate into why this was happening, however I restructured the script to completely remove the iframe instead of the src and inject a new instance if (for whatever rare edge use case) the screen is resized back down to mobile and the user wants to watch the video again:
function mobileVideoSource() {
var mobileBlock = $('#BuyNow-mobileBlock'),
currentVid = $('#howItWorks-MobileVersion'),
videoContainer = $('.iframe-container')
new_iframe = $('<iframe id="howItWorks-MobileVersion" class="howItWorks" width="560" height="315" src="$embeddedURL" frameborder="0" allowfullscreen></iframe>');
if (mobileBlock.is(":hidden")) {
currentVid.remove();
} else {
videoContainer.append(new_iframe);
}
}
I have 2 embeds I am displaying. The embeds have a link to a pdf:
<div id="container" class="text-center">
<embed src="www.example.com/pdf1.pdf" width="550" height="800" type='application/pdf' id="mypdf1">
<embed src="www.example.com/pdf2.pdf" width="550" height="800" type='application/pdf' id="mypdf2">
</div>
I also have 2 buttons, one to show the embed and another to hide the embed. Like this:
<div class="button">
<button class="btn-info" onclick="hide('thePdf2')" type="button">HIDE</button>
</div>
<div class="button">
<button class="btn-info" onclick="show('thePdf2')" type="button">SHOW</button>
</div>
I use the following functions to show and hide the embeds:
<script>
function show(target) {
document.getElementById(target).style.display = 'block';
}
function hide(target) {
document.getElementById(target).style.display = 'none';
}
</script>
My I am only showing and hiding one of the embeds, my problem is this: Evertime I show the embed it reloads the pdf and goes to the top of the pdf page. I don't want to reload the pdf everytime I show it. How can I achieve this ?
Isn't reloading the PDF in my browser (Chrome), so I can't reproduce, but using .visibility instead of .display might work in your browser.
<script>
function show(target) {
document.getElementById(target).style.visibility = 'visible';
}
function hide(target) {
document.getElementById(target).style.visibility = 'hidden';
}
</script>
You could also use .show()/.hide() Jquery function. Working plunck here. FYI, also added demo of loading a selected PDF into single <emded>.
/* toggle show hide of pdf */
$(document).on('click', '.pdf-container button', function(event){
var $target = $(event.target);
var $pdfViewer = $target.closest('.pdf-container').find('embed');
if(!$pdfViewer){ return; }
if($pdfViewer.is(':visible')){
$pdfViewer.hide();
$target.text('show');
return;
}
$pdfViewer.show();
$target.text('hide');
});
I have created popup window with the div tag when user click to watch specified video:
<div class="popup" >
<h2 class="popup_header center">Tutorial - 2</h2>
<p class="popup_sub_header center"> Tutorial Label </p>
<div class="popup_video_container">
<div class="video_frame pop_mode" id="popUpVideoWindow">
<iframe width="640" height="320" src="https://www.youtube.com/embed/link" frameborder="0" allowfullscreen="" hspace="0" vspace="0"></iframe>
</div>
<div class="tutorial_description">
</div>
</div>
<a class="close" href="#close"></a>
</div>
Now when i close this window video does not going to stop, continuing buffering and playing with other stuffs.
I have gone through other questions and found afterClose, on('hidden') method to work on class and idlike this one:
$('.popUpVideoWindow').on('hidden',function(){
$iframe = $(this)find("iframe");
$iframe.attr("src", $iframe.attr("src"));
console.log("Link set:" , $iframe.attr("src"));
});
and
$("#video_frame").bind('afterClose', function(){{
$iframe = $(this)find("iframe");
$iframe.attr("src", $iframe.attr("src"));
console.log("Link set:" , $iframe.attr("src"));
});
but it doesnt going to help me what i want. I want to stop playing the video when i close that popup div.
var figure = $(".video");
var vid = figure.find("video");
[].forEach.call(figure, function (item,index) {
item.addEventListener('mouseover', hoverVideo.bind(item,index), false);
item.addEventListener('mouseout', hideVideo.bind(item,index), false);
});
function hoverVideo(index, e) {
vid[index].play();
}
function hideVideo(index, e) {
vid[index].pause();
}
Check this example with this JSFiddle
Make necessary changes.
check it please..regds