視頻莫代爾引導

Question

我有一個問題，已經有幾天在一個網頁上爲幾個朋友工作，我需要用YouTube的視頻來做模態，我使用的是swig，因爲在我看來編譯爲html格式非常有效，當您將對象用作JSON時，這是一件大衣，問題是我設法使用圖片來製作模式，非常簡單，但對於視頻來說更加複雜。

這是我的CSS：

#headerLogo{ 
    background: url(https://images2.alphacoders.com/698/698137.jpg); 
    background-size: cover; 
    height: 250px; 
    display: block; 
    margin-top: 50px; 
    } 
    #text{ 
    color: white; 
    position: absolute; 
    text-align:center; 
    font-size: 36px; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
    line-height: 250px; 
    } 
    .navbar{ 
    margin-bottom: 0px; 
    } 
    .fa{ 
    font-size:22px; 
    color: #0077cd; 
    } 
    .fa:hover{ 
    color: #0890f2; 
    } 
    .footer{ 
    text-align: center; 
    color: #c6c6c6; 
    } 
    #indexImage{ 
    width:100%; 
    height: auto; 
    } 
    #myImg { 
    border-radius: 5px; 
    cursor: pointer; 
    transition: 0.3s; 
} 

#myImg:hover {opacity: 0.7;} 

/* The Modal (background) */ 
.modal { 
    display: none; 
    position: fixed; 
    z-index: 1; 
    padding-top: 100px; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
} 

.modal-content { 
    margin: auto; 
    display: block; 
    width: 80%; 
    max-width: 700px; 
} 

/* Caption of Modal Image (Image Text) - Same Width as the Image */ 
#caption { 
    margin: auto; 
    display: block; 
    width: 80%; 
    max-width: 700px; 
    text-align: center; 
    color: #000000; 
    padding: 10px 0; 
    height: 150px; 
} 

/* Add Animation - Zoom in the Modal */ 
.modal-content, #caption { 
    -webkit-animation-name: zoom; 
    -webkit-animation-duration: 0.6s; 
    animation-name: zoom; 
    animation-duration: 0.6s; 
} 

@-webkit-keyframes zoom { 
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)} 
} 

@keyframes zoom { 
    from {transform:scale(0)} 
    to {transform:scale(1)} 
} 

/* The Close Button */ 
.close { 
    top: 15px; 
    right: 35px; 
    color: #ffffff; 
    font-size: 60px; 
    font-weight: bold; 
    transition: 0.3s; 
} 

.close:hover, 
.close:focus { 
    color: #bbb; 
    text-decoration: none; 
    cursor: pointer; 
} 

/* 100% Image Width on Smaller Screens */ 
@media only screen and (max-width: 700px){ 
    .modal-content { 
     width: 100%; 
    } 
} 

這是我的js文件：

// Get the modal 
var modal = document.getElementById('myModal'); 
var images = document.getElementsByClassName("imageClass"); 
for(var i = 0; i < images.length; i++){ 
    var img = images[i]; 
    var modalImg = document.getElementById("img01"); 
    var captionText = document.getElementById("caption"); 
    img.onclick = function(){ 
     modal.style.display = "block"; 
     modalImg.src = this.src; 
     modalImg.alt = this.alt; 
     captionText.innerHTML = this.alt; 
    } 
} 
var span = document.getElementsByClassName("close")[0]; 

// When the user clicks on <span> (x), close the modal 
$('#closeImage').onclick = function() { 
    modal.style.display = "none"; 
} 

這是我projects.html與痛飲使它：

{% extends 'layout.html' %} 

{% block title %}{{ title }}{% endblock %} 
{% block header %}{% include 'header.html' %}{% endblock %} 
{% block headerLogo %}{% include 'headerLogo.html' %}{% endblock %} 
{% block styles %}{% include 'styles.html' %}{% endblock %} 
{% block content %} 

    <div> 
    {% for key, val in projectImages %} 
     {% if val.type == "image" %} 
     <img id="myImg" class="imageClass" src="{{val.src}}" alt="{{val.title}}" width="300" height="200"> 
     {% elseif val.type == "video" %} 
     <img id="myImg" class="videoClass" src="http://img.youtube.com/vi/{{val.src}}/0.jpg" alt="{{val.title}}" width="300" height="200"> 
     {% endif %} 
    {% endfor %} 
    <div id="myModal" class="modal"> 
     <span id="closeImage" class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span> 
     <img class="modal-content" id="img01"> 
     <div id="caption"></div> 
    </div> 
    </div> 
    <script src="../js/fotoInModal.js"></script> 
{% endblock %} 

我的JSON對象：

{ 
    "title": "Argochamber", 
    "indexContent":"Was created in 2012, by Pablo Blanco Celdrán and Eric Dacal Sanchez, in order to create fun games and for the whole world.", 
    "navButtons" : [{"name": "Projects", "src": "./projects.html"}, {"name": "Contacts", "src": "./contacts.html"},{"name": "Teams", "src":"./teams.html"}], 
    "imageUrl" : "https://avatars0.githubusercontent.com/u/17063359?v=4&s=200", 
    "imageHeaderLogo" : "https://images2.alphacoders.com/698/698137.jpg", 
    "headerNavBar": "navbar-light bg-primary", 
    "fontawesome": [{"icon": "fa fa-facebook-official", "src": "https://www.facebook.com/argochamber/?ref=br_rs"}, 
    {"icon": "fa fa-twitter-square", "src": "https://twitter.com/argochamber"}], 
    "projectImages":[{"title": "Spiderman in New York", "src": "../image/spidey.jpg", "type": "image"}, 
    {"title": "Sculpting link", "src":"ALbt17LLH54", "type": "video"}], 
    "css": { 
    "headerTextColor": "white", 
    "headerFontSize": "36px" 
    } 
} 

以前點擊圖片

結果：後點擊圖片

結果：

Answer 1

在projects.html你有img，而不是YouTube的iframe

{% elseif val.type == "video" %} 
     <img id="myImg" class="videoClass" src="http://img.youtube.com/vi/{{val.src}}/0.jpg" alt="{{val.title}}" width="300" height="200"> 
{% endif %}