文章添加外链视频样式

2017多玩新版wap站/src/article.html

@@ -66,6 +66,10 @@
                     <p>
                         上周，任天堂在《火焰纹章》直面会公布了备受期待的火纹手游《火焰纹章：英雄》，游戏将于2月2日抢先登陆安卓和iOS平台，采用免费下载，内购付费的模式。近日，《火焰纹章：英雄》的官方网站发布了首批上线的39个国家地区名单，其中完全没有中文地区，香港、台湾都不在名单当中。
                     </p>
+                    <p>横屏视频</p>
+<p class="video-horizontal"><iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=v0817s1fbgq"></iframe></p>
+<p>竖屏视频</p>
+<p class="video-vertical"><iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=v0817s1fbgq"></iframe></p>
                     <div class="article-pc-catalog" style="display:none">
                         <div class="catalog-hd">
                             <h3>第1页：曹休</h3>

2017多玩新版wap站/src/sass/page/_article.scss

@@ -33,6 +33,24 @@
             p{
                 margin-top: px2rem(20);
             }
+            .video-horizontal,.video-vertical{
+                position: relative;
+                height: 0;
+                margin: 0 auto;
+                iframe{
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+            .video-horizontal{
+                width: 100%;
+                padding-bottom: 56%;
+            }
+            .video-vertical{
+                width: 66%;
+                padding-bottom: 105%;
+            }
         }
         .article-summary{
             font-size: px2rem(28);