Develop Reference

Alpine.js - stop video on modal close

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>

How do I force any iframe content to appear on top if changed, without changing the attributes in the links?

How do I force any iframe content to appear on top if the content is changed as if the link had the target="_top" attribute...
EXAMPLE 1: Normally this code is what would be applied in a page.
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
if(top!=self){
top.location.replace(document.location);
alert("For security reasons, framing is not allowed; click OK to remove the frames.")
}
</script>
But I need to aply it to the iframe instead, and fire it only if the iframe is changed. How do I do that?
For example, I click on a link within the iframe, once that page changes URL then the iframe puts the page on target="_top" without having attributes for it in the iframe URL page, but the attributes for it should be from the iframe page itself.
EXAMPLE 2:
I have found a code that works as it should, the problem is only that it only fires when clicked on a button. Can I somehow make it to fire automatically when content of the iframe changes?
JavaScript:
<script type="text/javascript">
//<![CDATA[
$(window).load(function(){
document.getElementById('example-button').addEventListener('click', function (ev) {
ev.preventDefault();
var win = open('about:blank');
var iframe = document.getElementById('example-iframe');
setTimeout(function () {
var body = win.document.body;
body.style.padding = 0;
body.style.margin = 0;
body.appendChild(iframe);
iframe.style.position = 'fixed';
iframe.style.padding = 0;
iframe.style.margin = 0;
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.border = 0;
}, 100);
win.addEventListener('beforeunload', function () {
document.getElementById('example-container').appendChild(iframe);
iframe.style.position = '';
iframe.style.padding = '';
iframe.style.margin = '';
iframe.style.width = '';
iframe.style.height = '';
iframe.style.border = '';
});
});
});
//]]>
</script>
HTML:
<button id="example-button">open in new window</button>
<div id="example-container">
<iframe id="example-iframe" src="https://example.com/">
</iframe>
</div>

After fiddling and putting together with loads of ideas given online by others I came up with a solution that is 70% correct.
Now the only thing that remains is how to make it react ONLY when the iframe URL changes and not when loading like now.
JavaScript:
<script language="JavaScript">
function GoToURL()
{
var URLis;
URLis = document.URLframe.u.value
{
var location= (URLis);
window.open(location, '_blank');
}
}
</script>
HTML:
<form name="URLframe" id="URLframe" method="post">
<iframe id="test" src="https://example.com" onload="GoToURL(this);"></iframe>
<input type="hidden" name="u" size="71" value="" placeholder=" URL " id="SeekBox" onkeypress="handleKeyPress(event)">
<script type="text/javascript">
(function() {
document.getElementById('SeekBox').value = document.getElementById('test').src;
})();
</script>
</form>
To test it easier I used these codes at the bottom instead:
<iframe id="test" src="https://www.4shared.com/privacy.jsp" onload="loadurl();" width="100%" height="528px"></iframe>
<input type="text" name="u" size="71" value="" placeholder=" URL " id="SeekBox">
<input type="button" id="SeekButton" onclick="GoToURL(this);" value=" go ">
<input type="button" id="SeekButton" onclick="loadurl();" value=" load url ">
<input type="button" id="SeekButton" onclick="alerturl();" value=" alert url ">
<script type="text/javascript">
function alerturl() {
alert($('iframe').attr('src'));
}
</script>
<script type="text/javascript">
function loadurl() {
document.getElementById('SeekBox').value = document.getElementById('test').src;
}
</script>

If I understand you correctly then you want to get the src of the iframe any time there is a change within the iframe and then open a window with that src. If I'm right then it doesn't seem like it's possible. I tried to get the source of the iframe using this little bit of code but to no avail.
<iframe id="test" src="justanotherwebsite.com" onLoad="iframeLoad()"></iframe>
<script>
var counter = 0;
function iframeLoad(){
if (counter > 0){
console.log($('#test').attr('src'));
}
counter ++;
}
</script>
Let me know if I'm way off the mark on this and I'll have another look.

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>

Video pop up autoplay, when pop up does not come up. i can still hear sound

I added this pop up to my site, and try add autoplay, but the problem is even the pop dont come up each time you refresh your website, you can still hear the sound.how can i stop the autoplay when pop up doesn't show?
I tried to solve problem by doing this but is still not working
<script>
$( document ).ajaxComplete(function() {
$("#popup_87 flex-video iframe").attr("src","https://www.youtube.com/embed/vYAVyEdBfEU?rel=0&autoplay=1;showinfo=0");
});
</script>
<!-- START POPUP CODE -->
<div id="popup_87" class="reveal-modal small" data-reveal aria-labelledby="popvideo" aria-hidden="true" role="dialog">
<div class="flex-video widescreen">
<iframe src="https://www.youtube.com/embed/vYAVyEdBfEU?rel=0&showinfo=0&autoplay=1" allowfullscreen="" frameborder="0" height="360" width="640"></iframe>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
<div class="hide">
popvideo
</div>
</div>
/////
<script>
if (jQuery.cookie('popup{$popup['popup_id']}') === undefined)
{
var cookieCount = 1;
}
else
{
var cookieCount = jQuery.cookie('popup{$popup['popup_id']}');
}
var popCount = {$popup['popup_max_display_count']};
if (cookieCount <= popCount) {
setTimeout(function() {\$(".clickMe").trigger("click");}, 3000);
cookieCount++;
jQuery.cookie('popup{$popup['popup_id']}', cookieCount, { expires: {$popup['popup_clear_count_after']} });
}
</script>

Try
<script>
function LoadVideo() {
// If it's visible
if($("#popup_87").is(":visible"))
{
// Load the video and auto play
$("#popup_87 flex-video iframe").attr("src","http://www.youtube.com/embed/vYAVyEdBfEU?rel=0&autoplay=1;showinfo=0");
}
}
</script>
EDIT since more code was added, put the trigger when they click on the link to load the video into the pop-up, otherwise don't load the video in the iframe:
<!-- START POPUP CODE -->
<div id="popup_87" class="reveal-modal small" data-reveal aria-labelledby="popvideo" aria-hidden="true" role="dialog">
<div class="flex-video widescreen">
<!-- Removed the source -->
<iframe allowfullscreen="" frameborder="0" height="360" width="640"></iframe>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
<div class="hide">
popvideo
</div>
I'm not sure if the following code works, but I just added LoadVideo to your script.
<script>
if (jQuery.cookie('popup{$popup['popup_id']}') === undefined)
{
var cookieCount = 1;
}
else
{
var cookieCount = jQuery.cookie('popup{$popup['popup_id']}');
}
var popCount = {$popup['popup_max_display_count']};
if (cookieCount <= popCount) {
LoadVideo();
setTimeout(function() {\$(".clickMe").trigger("click");}, 3000);
cookieCount++;
jQuery.cookie('popup{$popup['popup_id']}', cookieCount, { expires: {$popup['popup_clear_count_after']} });
}
</script>

JQuery get id after loaded html

I have a problem. I have two .html files.
<!DOCTYPE html>
<html><head>...</head>
<body>
<ul><li id="home"><a>Home</a></li></ul>
<div class="content"></div>
<script type="text/javascript" src="Javascripts/navigation.js"></script>
</body>
</html>
and
<h1>Welcome!</h1>
<div id="imgPanel" style="background:red;">
<img src="Images/me.png" class="img-responsive img-rounded">
</div>
<div id="textPanel" style="background:blue;"></div>
In my navigation.js I load the second .html file into the "content"-div of the first .html:
$(document).ready(function () {
var content = $(".content");
var a = $("#home");
home();
$('#textPanel').height( $('#imgPanel').height() );
function home() {
content.load("home.html");
}
a.on("click", function () {
home();
});
});
The loading works! My question is now:
How can I get the id of the div's of the second .html I loaded into the first one?
The var = $("#textPanel"); is null.

Since the content gets loaded asynchronously, you might want to change your code like this, to execute $('#textPanel').height() when it is available:
function home(){
content.load("home.html", function(){
$('#textPanel').height( $('#imgPanel').height() );
});
}
From this specification of callbacks
EDIT
Alternative:
HTML of loaded content
<h1>Welcome!</h1>
<div id="imgPanel" style="background:red;">
<img src="Images/me.png" class="img-responsive img-rounded" onload="setHeight()">
</div>
<div id="textPanel" style="background:blue;"></div>
JavaScript
$(document).ready(function () {
var content = $(".content");
var a = $("#home");
home();
function home() {
content.load("home.html");
}
a.on("click", function () {
home();
});
});
function setHeight(){
$('#textPanel').height($('#imgPanel').height());
}