Hi,
In a personal website I am trying to develop, I have numerous modals with youtube videos that are intended to be linked from drop down menus.
It all works perfectly in Chrome but unfortunately in Safari the modals appear only partially and are stuck inside the dropdown menu. The modal I’ve used is modified but uses a W3Schools stylesheet. The code below is simplified so the page might look a bit odd but it demonstrates the problem. If you click on, for example, the drop down menu for ‘Guitar Videos’ and select ‘Coming Down From Rising Fawn’, everything works perfectly well in Chrome but not in Safari. Not sure I can put the code in codepen or JSFiddle because of the stylesheet.
A few members here have already helped me with two other issues concerning these modals so thanks again. Any help would be greatly appreciated. Regards, Alex
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Alex Giordano</title>
<link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://use.fontawesome.com/b43fc68858.js"></script>
<style>
/*flexbox used to create sticky footer*/
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
background-image: url("picassobackgroundfinal.jpg");
background-size:cover;
font-family: 'Oxygen', sans-serif;
margin: 0 0 0 0;
}
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
font-size: 15px;
color: #FFFFE0;
margin-bottom: 15px;
margin-left: 15px;
}
h1 {
color: #FFFFE0;
margin: 35px 35px 35px 35px;
}
p {
font-size: 25px;
color: #FFFFE0;
margin: 15px 15px 0 15px;
}
.navbar {
font-size:0;
}
.navbar a {
display: inline-block;
color: black;
background-image: url("blue.jpg");
text-align: center;
padding: 15px 15px 15px 15px;
text-decoration: none;
font-size: 25px;
}
.navbar a:hover {
background-image: url("yellow.jpg");
color: black;
font-size: 25px;
}
.navbar a.active {
background-image: url("grey.jpg");
color: black;
font-size: 25px;
}
.dropdownbutton {
display: inline-block;
background-image: url("blue.jpg");
color: black;
padding: 15px 15px 15px 15px;
font-size: 25px;
border: none;
cursor: pointer;
}
.dropdowndiv {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-image: url("blue.jpg");
min-width: 100%;
max-height: 470px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
overflow-y: scroll;
}
.dropdown-content .dropdownlink {
color: black;
padding: 8px 8px 8px 8px;
text-decoration: none;
display: block;
text-align: left;
font-size: 18px;
}
.dropdown-content .dropdownlink:hover {
background-image: url("yellowdarker.jpg");
font-size: 18px;
}
/*Show the dropdown menu on hover*/
.dropdowndiv:hover .dropdown-content {
display: block;
}
/*Keep chaning backround image of dropdown button when dropdown conent shown*/
.dropdowndiv:hover .dropdownbutton {
background-image: url("yellow.jpg");
}
.share {
background-image: url("black.jpg");
display: inline-block;
margin: 15px 15px 0px 0px;
padding: 15px 15px 15px 15px;
}
i {
display: inline-block;
}
i:hover {
color: #FFFFE0;
}
.sharelabel {
padding-right: 15px;
font-size: 25px;
color: #FFFFE0;
text-align: center;
}
.facebook {
display: inline-block;
padding-right: 15px;
color: #708BC7;
}
.mail {
display: inline-block;
color: #BFEE90;
}
iframe {
display: block;
margin: 15px auto 0 auto;
}
/*Removed modal box, i.e. background and border*/
.modal-content {
background-image: transparent;
margin: 15% auto; /*15% from top and centered*/
padding: 0px 0px 0px 0px;
width: 560px;
height: 315px; /*Matches width and height of iframe but made transparent*/
}
.close {
color: #aaa;
float: right;
font-size: 18px;
color: #FFFFE0;
}
.close:hover, .close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="content">
<h1>Alex Giordano – Guitarist
</h1>
<div class="navbar">
<a href="index.html" class="active">Home</a>
<a href="aboutpage.html">About</a>
<a href="contactpage.html">Contact</a>
<div class="dropdowndiv">
<span class="dropdownbutton">Guitar videos <i class="fa fa-caret-down arrow" style="color:black"></i></span>
<div class="dropdown-content">
<a class="dropdownlink" href="guitarvideospage.html">All</a>
<!--trigger modal-->
<a class="dropdownlink" onclick="document.getElementById('id01').style.display='block'">Coming Down From Rising Fawn</a>
<!--modal-->
<div id="id01" class="w3-modal w3-animate-opacity">
<!--modal content-->
<div class="modal-content">
<span onclick="document.getElementById('id01').style.display='none'; stopVideo(modalA)" class="close">×</span>
<iframe width="560" height="315" src="https://www.youtube.com/embed/NCHEpoob-pE" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen>
</iframe>
</div>
</div>
<!--trigger modal-->
<a class="dropdownlink" onclick="document.getElementById('id02').style.display='block'">Give Me Back My 15 Cents</a>
<!--modal-->
<div id="id02" class="w3-modal w3-animate-opacity">
<!--modal content-->
<div class="modal-content">
<span onclick="document.getElementById('id02').style.display='none'; stopVideo(modalB)" class="close">×</span>
<iframe width="560" height="315" src="https://www.youtube.com/embed/0VMvU7NYWd0" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen>
</iframe>
</div>
</div>
<!--trigger modal-->
<a class="dropdownlink" onclick="document.getElementById('id03').style.display='block'">Improv in E Minor</a>
<!--modal-->
<div id="id03" class="w3-modal w3-animate-opacity">
<!--modal content-->
<div class="modal-content">
<span onclick="document.getElementById('id03').style.display='none'; stopVideo(modalC)" class="close">×</span>
<iframe width="560" height="315" src="https://www.youtube.com/embed/3QPnmoMceqc" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen>
</iframe>
</div>
</div>
</div>
</div>
<div class="dropdowndiv">
<span class="dropdownbutton">Mandolin videos <i class="fa fa-caret-down" style="color:black"></i></span>
<div class="dropdown-content">
<a class="dropdownlink" href="mandolinvideospage.html">All</a>
<!--trigger modal-->
<a class="dropdownlink" onclick="document.getElementById('id11').style.display='block'">Bach Cello Suite No 1 in G Major</a>
<!--modal-->
<div id="id11" class="w3-modal w3-animate-opacity">
<!--modal content-->
<div class="modal-content">
<span onclick="document.getElementById('id11').style.display='none'; stopVideo(modalK)" class="close">×</span>
<iframe width="560" height="315" src="https://www.youtube.com/embed/X0d7HwU7DMY" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen>
</iframe>
</div>
</div>
<!--trigger modal-->
<a class="dropdownlink" onclick="document.getElementById('id12').style.display='block'">Boatin' Up Sandy</a>
<!--modal-->
<div id="id12" class="w3-modal w3-animate-opacity">
<!--modal content-->
<div class="modal-content">
<span onclick="document.getElementById('id12').style.display='none'; stopVideo(modalL)" class="close">×</span>
<iframe width="560" height="315" src="https://www.youtube.com/embed/2npMebwFfi8" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen>
</iframe>
</div>
</div>
</div>
</div>
<div class="dropdowndiv">
<span class="dropdownbutton">'Modern Method' videos <i class="fa fa-caret-down" style="color:black"></i></span>
<div class="dropdown-content">
<a class="dropdownlink" href="modernmethodvideos.html">TBA</a>
</div>
</div>
</div>
<p>This website archives my musical endeavours, is a first attempt at HTML/CSS coding, and may be used as a reference point for any guitar teaching. Thanks very much for visiting.
</p>
<div class="share">
<span class="sharelabel">Share</span>
<span class="facebook"><a href="https://www.facebook.com/sharer/sharer.php?kid_directed_site=0&u=https%3A%2F%2Falexgiordano.github.io%2F&display=popup&ref=plugin&src=share_button&ext=1517140430&hash=Aea7DERbI1ae86DO"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i>
</a></span>
<span class="mail"><a href="mailto:?&subject=Howdy&body=Dear Sir/Madam%0D%0A%0D%0AThis site may be of interest:%0D%0A%0D%0Ahttps://alexgiordano.github.io %0D%0A%0D%0ABest Regards,%0D%0A%0D%0A"><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i>
</a></span>
</div>
</div>
<footer class="footer">© Copyright 2018 | Background by Pablo Picasso</footer>
<script>
function stopVideo(modal) {
var currentIframe = modal.querySelector('.modal-content > iframe');
currentIframe.src = currentIframe.src;
}
/*Get modal*/
var modalA = document.getElementById('id01');
var modalB = document.getElementById('id02');
var modalC = document.getElementById('id03');
var modalK = document.getElementById('id11');
var modalL = document.getElementById('id12');
/*Close on clicking outside modal*/
window.onclick = function(event) {
if (event.target == modalA) {
modalA.style.display = "none"; stopVideo(modalA);
}
if(event.target == modalB) {
modalB.style.display = "none"; stopVideo(modalB);
}
if (event.target == modalC) {
modalC.style.display = "none"; stopVideo(modalC);
}
if (event.target == modalK) {
modalK.style.display = "none"; stopVideo(modalK);
}
if (event.target == modalL) {
modalL.style.display = "none"; stopVideo(modalL);
}
}
</script>
</body>
</html>