Travel:影片賞析

Travel:影片賞析

範例結果

<h1>影片賞析</h1>
<div id="movie_content">
    <div id="movieL">
        
    </div>
    <aside id="movieR">
        <ul>
        <li><a href="https://www.youtube.com/embed/3NA8DeQ9yF8"><img src="../img/movie/movieS01.jpg" width="20%" alt=""/><p>Czech捷克<span>蜜月一生一次<br>無可取代</span></p></a></li>
        <li><a href="https://www.youtube.com/embed/CYhZSx9TKvQ"><img src="../img/movie/movieS02.jpg" width="20%" alt=""/><p>KENYA肯亞<span>聆聽東非的心跳<br>動物大遷徙</span></p></a></li>
        <li><a href="https://www.youtube.com/embed/nPOO1Coe2DI"><img src="../img/movie/movieS03.jpg" width="20%" alt=""/><p>DUBAI杜拜<span>法拉利樂園<br>星帆船酒店</span></p></a></li>
        <li><a href="https://www.youtube.com/embed/3-wrdTI0iE8"><img src="../img/movie/movieS04.jpg" width="20%" alt=""/><p>Netherlands荷蘭<span>風車水世界<br>鬱金香花季</span></p></a></li>
        <li><a href="https://www.youtube.com/embed/mJvfGm08-xE"><img src="../img/movie/movieS05.jpg" width="20%" alt=""/><p>Italy義大利<span>賽格威夜遊羅馬<br>發現不同角度的美</span></p></a></li>
      </ul>
    </aside>    
</div>
/* CSS Document */
#movie_content{ overflow:hidden; width:100%; margin:20px auto;}
#movieL{ float:left; width:80%;  display:flex; height:650px; /*background:#FFCACB;*/}
#movieL iframe{ margin:0px auto; display:block; align-self:center;}
#movieR{ float:right; width:20%; /*background:#83CAF8;*/}
#movieR li{width:180px; height:100px; margin:20px; position:relative; overflow:hidden; border:1px solid #000000;}
#movieR li img{ width:100%; height:auto; display:block;  transition:all .5s;}
#movieR li p{ background:rgba(0,0,0,0.5); width:100%; height:100%;
			color:#FFFFFF; text-align:center; font-size:24px; padding-top:10px; text-shadow:1px 1px #000000;
			position:absolute; top:0; left:0; margin-top:100px; transition:all .5s;
}
#movieR li p span{ font-size:18px; display:block;}
#movieR li:hover p{ margin-top:0;}
#movieR li:hover img{ transform:scale(2);}

修改HTML結構即可

相關參數,利用【&】連結參數

<h1>影片賞析</h1>
<div id="movie_content">
    <div id="movieL">
        <iframe name="movieFrame" width="90%" height="450" src="https://www.youtube.com/embed/3NA8DeQ9yF8?rel=0" frameborder="0" allowfullscreen></iframe>
    </div>
    <aside id="movieR">
        <ul>
        <li><a href="https://www.youtube.com/embed/3NA8DeQ9yF8" target="movieFrame"><img src="img/movie/movieS01.jpg" width="20%" alt=""/><p>Czech捷克<span>蜜月一生一次<br>無可取代</span></p></a></li>
        <li><a href="https://www.youtube.com/embed/CYhZSx9TKvQ" target="movieFrame"><img src="img/movie/movieS02.jpg" width="20%" alt=""/><p>KENYA肯亞<span>聆聽東非的心跳<br>動物大遷徙</span></p></a></li>
        <li><a href="https://www.youtube.com/embed/nPOO1Coe2DI" target="movieFrame"><img src="img/movie/movieS03.jpg" width="20%" alt=""/><p>DUBAI杜拜<span>法拉利樂園<br>星帆船酒店</span></p></a></li>
        <li><a href="https://www.youtube.com/embed/3-wrdTI0iE8" target="movieFrame"><img src="img/movie/movieS04.jpg" width="20%" alt=""/><p>Netherlands荷蘭<span>風車水世界<br>鬱金香花季</span></p></a></li>
        <li><a href="https://www.youtube.com/embed/mJvfGm08-xE" target="movieFrame"><img src="img/movie/movieS05.jpg" width="20%" alt=""/><p>Italy義大利<span>賽格威夜遊羅馬<br>發現不同角度的美</span></p></a></li>
      </ul>
    </aside>    
</div><!--#movie_content End-->