html 使用flexbox响应youtube视频

Posted 2021-05-11

<div class="wrap">
  <div class="flex-videoWrapper" style="display:flex;">
                      <iframe width="560" height="315" src="put youtube link here" frameborder="0" allowfullscreen style="flex:1; margin: 10px;"></iframe>
											<iframe width="560" height="315" src="put youtube link here" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen style="flex:1; margin: 10px;"></iframe>
                    </div>
										<style media="screen">

											@media all and (min-width: 779px) {
													.flex-videoWrapper {
															flex-direction: row;
												}
											}
											@media all and (max-width: 778px) {
													.flex-videoWrapper {
															flex-direction: column;
													}
											}
											@media all and (max-width: 619px) {
													.flex-videoWrapper iframe {
															width: 100%;
												}
											}
										</style>
                </div>
              </div>