常連

注目の的

社会貢献

質問力

webpackの学習をしています。
webpackで作成したmain.js(index.jsとmyutilの結合）の中のメソッドなどを、
test.jsから利用したいのですが実現できずにいます。
上記のようなことが可能かどうかご教示いただきたいです。
また上記が可能な場合、誤っている点をご指摘いただけますでしょうか。

### 発生している問題・エラーメッセージ
Uncaught SyntaxError: Cannot use import statement outside a module

### 該当のソースコード

index.html
```
<!DOCTYPE html>
<html lang="ja">
<head>
	<title>Document</title>
</head>
<body>
	<p>hello webpack!</p>

	<script src="./main.js"></script>
	<script src="./test.js"></script>
</body>
</html>
```
test.js
```
import { APP_NAME, hello, Figure } from './main';
console.log(Figure.getTriangle(1, 5));

```
index.js(webpackによりmain.jsになります）
```
import { APP_NAME, hello, Figure } from './myutil';
console.log(Figure.getTriangle(100, 5));
```
myutil.js(webpackによりmain.jsになります）
```let message="こんにちは";
export const APP_NAME="webpack!??";
export class Figure {
	static getTriangle(base,height){
		return base * height;
	}
}
```

webpackで作成したmain.jsを他のjavascriptから利用したい

### 前提

ボタンを押すことでモーダルウィンドウを表示する機能を作っています。

[動作サンプル](https://jsbin.com/kanukilipu/edit?output)

ボタンAを押すと埋め込んだYouTubeが含まれるモーダルAが表示されます。
ボタンBを押すとテキストのみが含まれるモーダルBが表示されます。

### 発生している問題

◆上記動作サンプル（JSBin）の画面上部にあるHTML～Outputタブの内、Outputタブのみを表示させた状態でモーダルAを表示すると、埋め込んだYouTubeのサムネの上下が欠けてしまいます。
![上下欠け](860be58a79911b2c14b4aadb02d62c94.jpeg)
再生すると元サイズの縦横比を保ったまま再生されますが、動画の両端に余計な黒い部分ができてしまいます。

逆にタブを全て表示した状態だとサムネの両端が欠けてしまい、再生すると動画の上下に余計な黒い部分ができてしまいます。
![両端欠け](2234eaa8c37fc62b47f9c617eb135d80.jpeg)

◆HTML～Consoleタブの内、2つ～3つを表示させてからモーダルBを表示すると、モーダルBの上部がはみ出してしまいます。
下にはみ出した分は下へスクロールすることで閲覧できますが、上にはみ出した分は上へスクロールできないため、閲覧できない状態です。
![上欠け](cebe1ff9e43a358eefaabd9f6593b076.jpeg)
また、細かな問題ではありますが、モーダルBの縦サイズがウインドウサイズいっぱいまで広がっているため余白が無くなってしまいました。

### 実現したいこと

![1](824e797689807ee63629e78af119c06f.jpeg)
動画の元縦横比を保ったまま埋め込みたいです。

![2](65085648af19accc0875ef04d77b13ca.jpeg)
ウィンドウサイズが小さくなった場合でも同様に元縦横比を保ったまま埋め込みたいです。
動作サンプルに比べてモーダルウィンドウのサイズが小さくなりますが、埋め込みサイズを優先したいです。

◆モーダルBの上部がはみ出さないようにしたいです。下部についてははみ出しを許容し、下へスクロールすることで閲覧できる状態にしたいです。
また、モーダルの上下は余白を付与したいです（文章が多くて下にはみ出す場合は余白は上のみ）
![3](bda07b0327bbed33081755842d81c463.jpeg)

### 該当のソースコード

```css
html {
  text-align: center;
}

h1, h2, p {
  margin: 0;
}

h2{
  margin-bottom: 2.5%;
}

.modals {
  display: none;
}

#modalArea {
  position: absolute;
  display: flex;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
}

.modals {
  color: white;
  background-color: black;
  width: 80vw;
  padding: 5%;
}

#a {
  margin: auto;
}

#video {
  margin: 2.5%;
}

#video iframe {
  width: 100%;
  margin: auto;
}

#b {
  margin: auto;
}

#b p {
  line-height: 2em;
  margin: 2.5%;
  text-align: left;
}
```
```html
<h1>open modal</h1>
<button id="openA">A</button>
<button id="openB">B</button>


<div id="modalArea">
　<div class="modals" id="a">
  　<h2>A</h2>
    <p>チョコレートケーキ</p>
    <div id="video">
    　<iframe width="560" height="315" src="https://www.youtube.com/embed/dsJtgmAhFF4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <button class="modalClose"><i class="far fa-times-circle"></i>close</button
　</div>
  <div class="modals" id="b">
  　<h2>B</h2>
    <h3>ピザ</h3>
    <p>イタリアで生まれ、世界的に広く食べられている料理である。また、ピザの発祥がリトアニアという説もある。日本で初めて紹介されたピザはなかなか一般的ではなかったが、1980年代後半より始まったバブル景気の最中に起きたイタリア料理ブームに伴い、次第にイタリア風のものも広く知られるようになっていった。</p>
    <p>日本を含む先進各国では、家庭向けの冷凍食品からレストランや専門店などの飲食店で提供されたり、あるいは電話などで注文する宅配サービスでも購入することができるため、一般になじみのある料理である。</p>
    <p>数多くのレシピが存在し、地域にある産品を取り込んだご当地グルメ的変化を見せるものも存在する。料理として提供される場合には、好みによって様々な食材が選択可能であることにもちなみ、広い層に人気のある料理である。</p>
    <button class="modalClose"><i class="far fa-times-circle"></i>close</button>
　</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
```
```javascript
$("#openA").on("click", () => {
    $("#a").show();
});
$("#openB").on("click", () => {
    $("#b").show();
});

$(".modalClose").on("click", () => {
    if ($("#a").is(":visible")) {
        $("#a").hide();
    };
    if ($("#b").is(":visible")) {
        $("#b").hide();
    };
});
```

### 試したこと

モーダルAの問題については、
[Youtube動画の埋め込み方法](https://www.aiship.jp/knowhow/archives/29116)
上記ページに記載されている、
```css
.video{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.video iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}
```
上記コードを試してみました。
小さいウインドウサイズでは希望通りのレイアウトになりましたが、大きいウインドウサイズだとモーダルの上部がはみ出てしまいました。
![はみでる](f8472f579c008775cdf66350d6b73e9b.jpeg)

モーダルBの問題については、どのように調べたらよいか分かりませんでした。

モーダルウィンドウ内に埋め込んだYouTubeの縦横比が崩れる。並びにモーダルウィンドウの上部がはみ出してしまう。

皆様こんにちわ。

現在、javascriptでサイト内のトップページのHTML（一部）を取得するために以下のようなソースを記述しております。

```javascript
		$(function(){
			var $out = $('.出力箇所');
			//------------------
			// ajaxでトップページのHTMLを取得
			//------------------
			$.ajax({
				type: 'GET',
				url: '/',
				dataType: 'html',
				async: false,
				success: function(data) {
					//------------------
					// HTMLから必要箇所のみ抽出
					//------------------
				    var docVoiceBox = '';
				    docVoiceBox = $(data).find('.目的箇所')[0].outerHTML;
					// 出力
					$out.append(docVoiceBox);
				}
			});
```

このサイトでは、PCとスマホは別ページを用意しており、スマホでアクセスした際はスマホサイトにリダイレクトされます。

今回取得した箇所は、「スマホ・PCどちらからでも、PCの目的箇所を抽出したい」のですが、スマホからこの処理を実行すると、スマホサイトのトップページ（リダイレクト後のページ）の内容が取得されてしまい、PCの情報が出てきません。
スマホサイトのディレクトリ（リダイレクト先）は/sp/という階層なので、ajax内のURLプロパティを
```javascript
url:'/sp/'
```
としたときと同じ内容になってしまっているんです。

PCにしか表示していない情報を抽出したいので、スマホ端末からでもPCのトップページのHTMLをajaxで取得する方法があれば、ご教授くださいm(__)m