(網路教學) 崁入 YouTube 並支援RWD

第一種方法透過CSS即可達成。

 

<方法一>

HTML

<div class="video-container">
    <iframe allowfullscreen="" frameborder="0" height="360" src="/Youtube 影片路徑" width="480"></iframe>
</div>

CSS

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

<方法二>

Javascript

<script type="text/javascript">
  $(document).ready(function () {
  $('iframe[src*="youtube.com"]').wrap('<div class="youtubecontent" />');
  });
</script> 

CSS

.youtubecontent{
position: relative;
padding-top: 30px; height: 0; overflow: hidden;
}
.youtubecontent{
padding-bottom: 56.25%;
}
.youtubecontent iframe,
.youtubecontent object,
.youtubecontent embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}